Forums

Auto Nav template – help!

Permalink
Hello, hope you can help.

I'm trying to access the below css drop down menu for an Auto Nav (I downloaded it and it works fine in html). The .php file I am trying to update in blocks/autonav/templates says:
// this is the first time we've entered the loop so we print out the UL tag
echo("<ul class=\"?????????\">");

Can anyone tell me what I can use on my template file to allow this code to work. I haven't a clue and would be very grateful for any help.

------begins------
#menu {position:relative; margin-left:12px; margin-top: 70px; z-index:100;}

#menu ul {margin:0; width: 215px; padding:0; list-style:none; white-space:nowrap; text-align:left; background:#000; padding:0;
background-image:-moz-linear-gradient(-90deg,rgba(255,255,255,0.5),rgba(255,255,255,0.1));
background-image:-ms-linear-gradient(-90deg,rgba(255,255,255,0.5),rgba(255,255,255,0.1));
background-image:-o-linear-gradient(-90deg,rgba(255,255,255,0.5),rgba(255,255,255,0.1));
background-image:-webkit-linear-gradient(-90deg,rgba(255,255,255,0.5),rgba(255,255,255,0.1));
background-image:linear-gradient(-90deg,rgba(255,255,255,0.5),rgba(255,255,255,0.1));
border:1px solid #fff;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
-moz-box-shadow:0 0 5px rgba(0,0,0,0.4);
-webkit-box-shadow:0 0 5px rgba(0,0,0,0.4);
box-shadow:0 0 5px rgba(0,0,0,0.4);
}

#menu li {display:inline;}
#menu ul ul {position:absolute; left:100%; margin-top:-31px; margin-left:-8px; display:none;}
/* for IE7 */
#menu ul ul {*left:-9999px; *display:block;}

#menu ul#toplevel {position:relative; float:left;}

#menu a {
display: block;
color: #fff;
text-decoration: none;
padding: 0 15px;
font-family: 'Droid Serif', serif;
font-size: 14px;
line-height: 40px;
}


#menu li:hover > a {color:#222; text-shadow:1px 1px 2px rgba(255, 255, 255, 0.6);
background-image:-moz-linear-gradient(-90deg,rgba(255,255,255,0.5),rgba(255,255,255,0.1));
background-image:-ms-linear-gradient(-90deg,rgba(255,255,255,0.5),rgba(255,255,255,0.1));
background-image:-o-linear-gradient(-90deg,rgba(255,255,255,0.5),rgba(255,255,255,0.1));
background-image:-webkit-linear-gradient(-90deg,rgba(255,255,255,0.5),rgba(255,255,255,0.1));
background-image:linear-gradient(-90deg,rgba(255,255,255,0.5),rgba(255,255,255,0.1));
-moz-border-radius:0;
-webkit-border-radius:0;
border-radius:0;
}
#menu ul li:first-child > a {
-moz-border-radius:9px 9px 0 0;
-webkit-border-radius:9px 9px 0 0;
border-radius:9px 9px 0 0;
}
#menu ul li:last-child > a {
-moz-border-radius:0 0 9px 9px;
-webkit-border-radius:0 0 9px 9px;
border-radius:0 0 9px 9px;
}

#menu.red li:hover > a {background-color:#d00;}
#menu.orange li:hover > a {background-color:#fa0;}
#menu.yellow li:hover > a {background-color:#da2;}
#menu.green li:hover > a {background-color:#494;}

#menu.blue li:hover > a {background-color:#0bf;}
#menu.indigo li:hover > a {background-color:#95d;}
#menu.violet li:hover > a {background-color:#e8e;}
#menu.grey li:hover > a {background-color:#999;}

#menu ul li:hover > ul {display:block; left:100%;}

#menu img {position:fixed; width:0; height:0; left:0; top:0; z-index:-1;}

#menu ul:hover + img {width:100%; height:100%;}
 
jordanlev replied on at Permalink Reply
jordanlev
The built-in autonav template is a complete mess. I've made a much cleaner one that is a zillion times easier to style, and have a tutorial that explains how to do it:
http://c5blog.jordanlev.com/blog/2011/12/customizing-the-autonav-te...

If that doesn't get you where you need to be, reply back with your specific problem and someone should be able to help.
ppisoban replied on at Permalink Reply
ppisoban
I was having a problem with this particular drop down navigation (using it with ProEvents it kept showing each event as a new page) and I had already found Jordan Lev's wonderful rewritten autonav template to cure that, but I couldn't get it to work with this nav even though it worked fine with all the other navs I had used on other sites.

I spent quite a lot of time trying to edit Jordan's code (now my view.php file) with no joy, until it dawned on me that I just needed to wrap the php custom navigation code in my header.php (or any other .php file where I am using the code) with <ul id="menu">.

So here is the exact code:

<ul id="menu">
                     <?php                  
                               #   Custom Navigation, Before editing please reference any changes 
                               $bt = BlockType::getByHandle('autonav');
                               $bt->controller->displayPages = 'top';
                                  $bt->controller->orderBy = 'display_asc';
                                  $bt->controller->displaySubPages = 'all'; 
                               $bt->controller->displaySubPageLevels = 'all';
                               $bt->render('../../blocks/autonav/templates/yourcustomname/view');
                     ?>
                  </ul>

Obviously changing the yourcustomname to the name of your particular autonav block folder where the view.php is stored. I didn't have to edit Jordan's code at all, it worked perfectly as it is. Hope this helps someone, it may be obvious to some, but it wasn't to me!