WBCE CMS Forum

WBCE CMS – Way Better Content Editing.

You are not logged in.

#1 16.12.2020 11:42:23

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

Offline

#2 16.12.2020 12:41:37

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.

Offline

#3 16.12.2020 18:05:57

peppos
Member

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

Ok, thanks for reply.  smile

Offline

#4 17.12.2020 08:30:52

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.

Offline

#5 21.12.2020 14:10:29

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>

smile

Offline

Liked by:

florian

#6 21.12.2020 14:24:05

florian
Administrator

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

cool, thanks.


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

Offline

Board footer

up