WBCE Home | WBCE Hilfe | WBCE Addon Repository | Impressum | Datenschutz

WBCE CMS Forum

WBCE CMS – Way Better Content Editing.

You are not logged in.

#1 05.11.2018 11:15:58

florian
Projektmanagement und Support WBCE CMS

Responsive, mehrstufige Navigation

Es ist mir tatsächlich gelungen, diese Navigation hier
http://w3bits.com/css-responsive-nav-menu/

mit SM2 umzusetzen, und zwar so:

<?php
	 $mainnav = show_menu2(
		$aMenu          = 1,
		$aStart         = SM2_ROOT,
		$aMaxLevel      = SM2_ALL,
		$aOptions       = SM2_ALL|SM2_PRETTY|SM2_BUFFER,
		$aItemOpen      = '<li><a  href="[url]" class="[class]" target="[target]">[menu_title][if (class==menu-expand){<span class="drop-icon">▾</span><label title="Toggle Drop-down" class="drop-icon" for="sm[page_id]">▾</label>}]</a>',
		$aItemClose     = '</li>',
		$aMenuOpen      = '<input type="checkbox" id="sm[parent]"><ul class="sub-menu">',
		$aMenuClose     = '</ul>',
		$aTopItemOpen   = false,
		$aTopMenuOpen   = ' <ul class="main-menu cf">'
	  );	
?>

Im Template dann an der Stelle, wo die Navigation hin soll, einfügen:

<nav id="menu">
	<label for="tm" id="toggle-menu">Navigation <span class="drop-icon">▾</span></label>
	<input type="checkbox" id="tm">
	<?php echo $mainnav; ?>
</nav>			

Stylesheet:

#menu a {
	text-decoration:none;
}

#menu ul {
  margin: 0;
  padding: 0;
}

#menu .main-menu {
  display: none;
}

#tm:checked + .main-menu {
  display: block;
}

#menu input[type="checkbox"], 
#menu ul span.drop-icon {
  display: none;
}

#menu li, 
#toggle-menu, 
#menu .sub-menu {
  border-style: solid;
  border-color: rgba(0, 0, 0, .05);
}

#menu li, 
#toggle-menu {
  border-width: 0 0 1px;
}

#menu .sub-menu {
  background-color: #444;
  border-width: 1px 1px 0;
  margin: 0 1em;
}

#menu .sub-menu li:last-child {
  border-width: 0;
}

#menu li, 
#toggle-menu, 
#menu a {
  position: relative;
  display: block;
  color: white;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .125);
}

#menu {
  background-color: #005b95;
}

#toggle-menu {
  background: #333;
}

#toggle-menu, 
#menu a {
  padding: 1em 1.5em;
}

#menu a {
  transition: all .125s ease-in-out;
  -webkit-transition: all .125s ease-in-out;
}

#menu a:hover {
  background-color: white;
  color: #005b95;
}

#menu .sub-menu {
  display: none;
}

#menu input[type="checkbox"]:checked + .sub-menu {
  display: block;
}

#menu .sub-menu a:hover {
  color: #444;
}

#toggle-menu .drop-icon, 
#menu li label.drop-icon {
  position: absolute;
  right: 0;
  top: 0;
}

#menu label.drop-icon, #toggle-menu span.drop-icon {
  padding: 1em;
  font-size: 1em;
  text-align: center;
  background-color: rgba(0, 0, 0, .125);
  text-shadow: 0 0 0 transparent;
  color: rgba(255, 255, 255, .75);
}

@media only screen and (min-width: 1024px) {
  #menu .main-menu {
    display: block;
  }

  #toggle-menu, 
  #menu label.drop-icon {
    display: none;
  }

  #menu ul span.drop-icon {
    display: inline-block;
  }

  #menu li {
    float: left;
    border-width: 0 1px 0 0;
  }

  #menu .sub-menu li {
    float: none;
  }

  #menu .sub-menu {
    border-width: 0;
    margin: 0;
    position: absolute;
    top: 100%;
    left: 0;
    width: 12em;
    z-index: 3000;
  }

  #menu .sub-menu, 
  #menu input[type="checkbox"]:checked + .sub-menu {
    display: none;
  }

  #menu .sub-menu li {
    border-width: 0 0 1px;
  }

  #menu .sub-menu .sub-menu {
    top: 0;
    left: 100%;
  }

 #menu .sub-menu .drop-icon {
    position: absolute;
    top: 0;
    right: 0;
    padding: 1em;
  }

  #menu li:hover > input[type="checkbox"] + .sub-menu {
    display: block;
  }
  
  .spacer {
	  height:1.4em;
  }
}

Gegenüber smartmenus.org hat diese Navigation den großen Vorteil, deutlich leichter gestylt werden zu können und ohne SASS auszukommen.

Offline

Liked by:

screamindan, byteworker, better-work, colinax, chap

#2 05.11.2018 12:37:38

byteworker
Member

Re: Responsive, mehrstufige Navigation

Schönes Ding, sieht einfacher aus als das Smartmenue, das ich gern verwendet habe. Wenns genehm ist, werde ich das ebenfalls mal ausprobieren.

Offline

#3 05.11.2018 12:41:00

florian
Projektmanagement und Support WBCE CMS

Re: Responsive, mehrstufige Navigation

Klar, deshalb habe ich das ja hier reingestellt.
Ich habe auf der Seite des "Erfinders" allerdings nichts zur Lizenz gefunden, aber ich gehe davon aus, dass ein ausführliches Tutorial ja dazu gedacht ist, für eigene Projekte genutzt zu werden.

Offline

Liked by:

byteworker, stefanek

#4 30.12.2018 18:02:41

screamindan
Member

Re: Responsive, mehrstufige Navigation

Moin. Wo muss denn der erste Code (Showmenu2 Aufruf) genau hin?

Online

#5 30.12.2018 18:29:50

bernd
Developer

Re: Responsive, mehrstufige Navigation

Der kann ganz am Anfang vom Template stehen,
auf jeden Fall vor dem 2. Schnippsel in dem dann der Inhalt von $mainnav ausgegeben wird.


2 x ROT13 hält besser ...

Offline

Board footer

Powered by FluxBB

up