Drop Down Menu
-
- Premium User
- Posts: 9
- Joined: Sun Feb 16, 2014 7:06 pm
Drop Down Menu
Anyone have any luck creating a dropdown menu in Wonder CMS?
Re: Drop Down Menu
I haven't seen it in use yet. One of the main reasons is because WonderCMS doesn't support sub-pages (for now).
You could still achieve this by tweaking the menu and adding some jQuery that would hide your navigation elements by default and show them (dropdown) on hover.
You could still achieve this by tweaking the menu and adding some jQuery that would hide your navigation elements by default and show them (dropdown) on hover.
Re: Drop Down Menu
Adding some tags to menus:
on theme.php call function menu without parameters:
On index.php
on Style.css
Search on internet for more css drop menus: http://line25.com/wp-content/uploads/20 ... index.html
Code: Select all
Home
Colours_SUB
Red
Blue
Yellow_END
Food_SUB
Burguer
Pizza
Ham_END
About
Code: Select all
<?php menu();?>
Code: Select all
function menu( ){
global $c,$hostname;
$mlist = explode('<br />',$c['menu']);
for($i=0;$i<count($mlist);$i++){
$page = getSlug($mlist[$i]);
if(!$page) continue;
switch( substr($page, -4) ) {
case "_sub":
$page = chop($page,"_sub" );
echo "<li><a"." href='".$hostname.$page."'>".str_replace('-',' ',$page)." </a><ul> \n";
break;
case "_end":
$page = chop($page,"_end" );
echo "<li><a"." href='".$hostname.$page."'>".str_replace('-',' ',$page)." </a></li></ul> \n";
break;
default:
echo "<li><a"." href='".$hostname.$page."'>".str_replace('-',' ',$page)." </a></li> \n";
break;
}
}
}
Code: Select all
nav { width: 100%; float: left; position: relative; background: #1F2B33; }
nav ul { float: right; margin: 0 8% 0 0; }
nav li { float: left; font-size: 14px; list-style: none; }
nav li a { border: 0; color: #fff; display: block; text-transform: uppercase; padding: 25px 20px 25px 25px; }
nav li a:hover { background: #3c73b4; }
nav ul ul { display: none; }
nav ul li:hover > ul { display: block; }
nav ul:after { content: ""; clear: both; display: block; }
nav ul li { float: left; }
nav ul li:hover { background: #4b545f; }
nav ul li:hover a { color: #fff; }
nav ul li a { display: block; padding: 25px 40px; color: #757575; text-decoration: none; }
nav ul ul { background: #5f6975; padding: 0; position: absolute; top: 100%; }
nav ul ul li { float: none; border-top: 1px solid #6b727c; border-bottom: 1px solid #575f6a; position: relative; }
nav ul ul li a { padding: 15px 40px; color: #fff; }
nav ul ul li a:hover { background: #4b545f; }
nav ul ul ul { position: absolute; left: 100%; top:0; }