Drop Down Menu

Post Reply
autodefrost
Posts: 9
Joined: Sun Feb 16, 2014 7:06 pm

Drop Down Menu

Post by autodefrost »

Anyone have any luck creating a dropdown menu in Wonder CMS?
User avatar
wiz
Posts: 749
Joined: Sat Oct 30, 2010 12:23 am

Re: Drop Down Menu

Post 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.
Barquero
Posts: 1
Joined: Sat Nov 14, 2015 3:00 pm

Re: Drop Down Menu

Post 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
Post Reply