WBCE CMS Forum

peppos

Member

Menu multilevel responsive only in css (no jquery)

Sorry, I don't know if it's the right section. I would like to know if it is possible to convert the responsive multilevel menu on this page to showmenu:
http://fofwebdesign.co.uk/freebies-for- … n-menu.htm

Thanks

florian

Administrator

Re: Menu multilevel responsive only in css (no jquery)

Hm, that looks complicated. One would need to check on which level a menu item is and if it has childpages, and generate unique ids for the label, checkbox and ul tags... also duplicate parent menu items to display them as sub-heading in the mobile view.
It might be possible, but it's quite an effort.

---

Sorgen sind wie Nudeln: man macht sich meist zu viele.

peppos

Member

Re: Menu multilevel responsive only in css (no jquery)

Ok, thanks for reply. 

florian

Administrator

Re: Menu multilevel responsive only in css (no jquery)

Alright, here you are.
1. Put the CSS code from the FoF page in your template stylesheet
2. Put the menu call into the index.php of your template:

<input type="checkbox" id="main-nav-check"/>
<div id="menu"> 	
	<label for="main-nav-check" class="toggle" onclick="" title="Close">&times;</label>
	<?php
	show_menu2(
		$aMenu          = 1,
		$aStart         = SM2_ROOT,
		$aMaxLevel      = SM2_ALL,
		$aOptions       = SM2_ALL|SM2_PRETTY,
		$aItemOpen      = '<li><a href="[url]" class="[class]" target="[target]">[menu_title]</a>
							[if (class==menu-expand){
							<label for="p[page_id]" class="toggle-sub" onclick="">&#9658;</label>
							}]',
		$aItemClose     = '</li>',
		$aMenuOpen      = '<input type="checkbox" id="p[parent]" class="sub-nav-check">
							<ul id="p[parent]-sub" class="sub-nav">
							<li class="sub-heading">[menu_title] <label for="p[parent]" class="toggle" onclick="" title="Back">&#9658;</label></li>',
		$aMenuClose     = '</ul>',
		$aTopItemOpen   = false,
		$aTopMenuOpen   = ' <ul>'
	  );	
	?>
</div><!-- closing "#menu" -->
<div class="container">
	<div id="header">
		<a href="/">Home</a>	
		<label for="main-nav-check" class="toggle" onclick="" title="Menu">&#x2261;</label>
	</div><!-- closing "#header" -->
<?php
// customize to your needs - this is just a simple example
page_content();

?>
</div><!-- closing "#container" -->

---

Sorgen sind wie Nudeln: man macht sich meist zu viele.

peppos

Member

Re: Menu multilevel responsive only in css (no jquery)

Many thanks, nice and works perfectly. If it can be useful to someone, I would also like to point out another nice responsive menu with different graphics that is easier to integrate on WBCE. The menu is this: https://vinnymoreira.com/stellarnav-js-demo

This is the code of showmenu:

<div class="stellarnav">
<?php show_menu2(1, SM2_ROOT, SM2_ALL, SM2_ALL, '<li class="[class]"><a href="[url]" class="[class]"><span>[menu_title]</span></a>', "</li>", '<ul>', '</ul>', true, '<ul id="mobile" class="nav">');?>
</div>

florian

Administrator

Re: Menu multilevel responsive only in css (no jquery)

cool, thanks.

---

Sorgen sind wie Nudeln: man macht sich meist zu viele.