Forums

Help with CSS3 HTML5 drop down menu

Permalink
Hi,

I've built a CSS3 / HTML5 drop down menu, which was working fine in html on the browser.

But now I've put in the php code to hardcode the nav, the sub pages are not showing.

HTML:

<!-- Site Navigation -->
                            <nav>
                                    <?php
                           $bt_nav = BlockType::getByHandle('autonav');
                           $bt_nav->controller->displayPages = 'top';
                           $bt_nav->controller->orderBy = 'display_asc';
                           $bt_nav->controller->displaySubPages = 'all';
                           $bt_nav->render('templates/header_menu');
                           ?>
                            </nav>


CSS

nav ul { z-index:110; position: relative; list-style: none; display: block; border-radius:12px; -moz-border-radius:12px; -webkit-border-radius:12px; margin: 10px 0; font-size: 0;
background: #028dd5; /* Old browsers */ 
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAyOGRkNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyYTNiOWEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #028dd5 0%, #2a3b9a 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#028dd5), color-stop(100%,#2a3b9a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #028dd5 0%,#2a3b9a 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #028dd5 0%,#2a3b9a 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #028dd5 0%,#2a3b9a 100%); /* IE10+ */
background: linear-gradient(to bottom,  #028dd5 0%,#2a3b9a 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#028dd5', endColorstr='#2a3b9a',GradientType=0 ); /* IE6-8 */
}
nav ul li  { display: inline-block; margin: 0; border-left: 1px solid #1c58af; font-size: 0;}
nav ul li:first-child  { border-left: none;}
nav ul li a {color: #fff; font: bold 18px/30px Arial, Helvetica, sans-serif; padding:15px 18px; display: block;}
Viewing 15 lines of 27 lines. View entire code block.


Any help much appreciated
PatrickCassidy
 
PineCreativeLabs replied on at Permalink Reply
PineCreativeLabs
In your php, try changing this line:
$bt_nav->render('templates/header_menu');

to this:
$bt_nav->render('templates/main_menu');


Then, in your CSS, add class ".nav" to the ul tag: 
nav ul.nav
nav ul.nav li
etc...


See if this helps.
PatrickCassidy replied on at Permalink Reply
PatrickCassidy
No luck I'm afraid growthcurve...
Steevb replied on at Permalink Reply
Steevb
Does this work for you:
<?php
$nav = BlockType::getByHandle('autonav');
$nav->controller->orderBy = 'display_asc';
$nav->controller->displayPages = 'top';
$nav->controller->displaySubPages = 'all';
$nav->controller->displaySubPageLevels = 'all';
$nav->render('templates/header_menu');
?>
PatrickCassidy replied on at Permalink Reply
PatrickCassidy
Hey 55,

I copied and pasted your suggested code. It shows all the pages now, but it is showing them all as top level pages (not utilising the drop down code) so hence the main nav bar is about 11 rows deep of pages.

I'll keep playing with it, if there is anything else you can think of, please let me know. Other than that, I might just have to get the mega-menu add on or something and customize it.

Cheers
PatrickCassidy replied on at Permalink Best Answer Reply
PatrickCassidy
After some playing around, this is the solution that worked for me:

(for anyone that needs to know)

<?php
$nav = BlockType::getByHandle('autonav');
$nav->controller->orderBy = 'display_asc';
$nav->controller->displayPages = 'top';
$nav->controller->displaySubPages = 'all';
$nav->controller->displaySubPageLevels = 'custom';
$nav->controller->displaySubPageLevelsNum = 1;
$nav->render('view');
?>
Steevb replied on at Permalink Reply
Steevb
Hmmm, perhaps karma should have been split?

If all are being shown, maybe look @ your css.

My drop down only shows sub pages on hover, regardless of depth?
PatrickCassidy replied on at Permalink Reply
PatrickCassidy
Haha... yes 55...

I found my solution from jordanlev's blog here:

http://c5blog.jordanlev.com/blog/2012/04/hard-coded-autonav-options...

If you have a look down the page it has an example for Single-Level Dropdown Menu (1 level of dropdown)...

I'm no php programmer, but I'm thinking it has something to do with the render('view') line??