Page 1 of 1

Drop Down Menu

Posted: Mon Feb 17, 2014 12:49 am
by autodefrost
Anyone have any luck creating a dropdown menu in Wonder CMS?

Re: Drop Down Menu

Posted: Mon Feb 17, 2014 6:54 pm
by wiz
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.

Re: Drop Down Menu

Posted: Sat Nov 14, 2015 3:11 pm
by Barquero
Adding some tags to menus:

Code: Select all

Home
Colours_SUB
Red
Blue
Yellow_END
Food_SUB
Burguer
Pizza
Ham_END
About
on theme.php call function menu without parameters:

Code: Select all

<?php menu();?>	
On index.php

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;
		}
	}
}
on Style.css

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; }
Search on internet for more css drop menus: http://line25.com/wp-content/uploads/20 ... index.html