I figured there is probably no limit to what modx and .php can do and wondered what would be involved in getting a menu like this to work:
http://www.haztufiesta.com/menu-style.html (its such a cool flyout menu that uses nested .css and can be customized to the tee.
How would you even start?
The .css code is:
/*
____________________________
MENU STARTS
____________________________
*/
ul#mainNav{
display: block;
width: 175px;
margin-bottom: 20px;
position: relative;
top: 1.75em;
text-align: right;
list-style: none;
text-transform: uppercase;
font: 0.9em/1.6em Plantin, "Plantin std", "Plantin", "Baskerville", Georgia, "Times New Roman", serif;
}
ul#mainNav li{
position: relative;
text-indent: -9999px;
border-bottom: 1px dotted #0d70a1;
}
ul#mainNav li.last{
border-bottom: 0;
}
ul#mainNav li a{
width: 175px;
height: 27px;
display: block;
overflow: hidden;
color: #fff;
text-decoration: none
}
ul#mainNav li a.last{
border-bottom: 0;
}
ul#mainNav li.topLvl a{
background: url(/images/topLvl_arrow.gif) center right no-repeat;
}
/*
____________________________
START NESTED NAV
____________________________
*/
ul.nestedNav{
padding: 0 10px;
border: 6px solid #afd5e7;
display: none;
width: 180px;
position: absolute;
top: 0;
left: 100%;
z-index: 700;
background: #fff;
}
ul#mainNav li.topLvl ul.nestedNav li{
border-bottom: 0;
text-indent: 0;
padding: 0;
}
/*ul#mainNav li.topLvl:hover ul.nestedNav{
display: block;
}*/
ul#mainNav li.topLvl ul.nestedNav li a{
height: auto;
border-bottom: 1px dotted #0d70a1;
color: #0d70a1;
text-decoration: none;
background: none;
padding: 7px 0 6px 0;
text-transform: uppercase;
font-size: 11px;
}
ul#mainNav li.topLvl ul.nestedNav li a.last{
border-bottom: 0;
}
ul#mainNav li.topLvl a:hover{
background: url(/images/topLvl_arrow_on.gif) center right no-repeat;
}
ul#mainNav li.topLvl ul li a:hover{
background: none;
}
The tricky part, "I think" is the fact it uses .js files to make it work.
One is:
http://www.haztufiesta.com/js/jquery-1.2.1.min.js ( * jQuery 1.2.1 - New Wave Javascript )
and the one with specific .css menu related stuff is:
http://www.haztufiesta.com/js/functions1.js $(document).ready(function(){
$("ul#mainNav").css("z-index","999");
$("li a#nav_hunting").mouseover(function(){
$("ul#nav_hunting_nested").css("display","block");
});
$("ul#nav_hunting_nested").mouseover(function(){
$("ul#nav_hunting_nested").css("display","block");
});
$("li a#nav_hunting").mouseout(function(){
$("ul#nav_hunting_nested").css("display","none");
});
$("ul#nav_hunting_nested").mouseout(function(){
$("ul#nav_hunting_nested").css("display","none");
});
$("li a#nav_fishing").mouseover(function(){
$("ul#nav_fishing_nested").css("display","block");
});
$("ul#nav_fishing_nested").mouseover(function(){
$("ul#nav_fishing_nested").css("display","block");
});
$("li a#nav_fishing").mouseout(function(){
$("ul#nav_fishing_nested").css("display","none");
});
$("ul#nav_fishing_nested").mouseout(function(){
$("ul#nav_fishing_nested").css("display","none");
});
$("li a#nav_modx").mouseover(function(){
$("ul#nav_modx_nested").css("display","block");
});
$("ul#nav_modx_nested").mouseover(function(){
$("ul#nav_modx_nested").css("display","block");
});
$("li a#nav_modx").mouseout(function(){
$("ul#nav_modx_nested").css("display","none");
});
$("ul#nav_modx_nested").mouseout(function(){
$("ul#nav_modx_nested").css("display","none");
});
$("li a#nav_test").mouseover(function(){
$("ul#nav_test_nested").css("display","block");
});
$("ul#nav_test_nested").mouseover(function(){
$("ul#nav_test_nested").css("display","block");
});
$("li a#nav_test").mouseout(function(){
$("ul#nav_test_nested").css("display","none");
});
$("ul#nav_test_nested").mouseout(function(){
$("ul#nav_test_nested").css("display","none");
});
});
I was immediately intriqued with this last one and wondered how they would ever be able to update their menu without having to go into this file and manually add in each new menu with sub categories. I said to myself, surely they update the file automatically somehow.
This is currently beyond me but so interesting when seeing just how coders divise all this.
Cordially,
Marco
☆ A M B ☆