WBCE CMS Forum

WBCE CMS – Way Better Content Editing.

Du bist nicht angemeldet.

#1 05.11.2018 11:15:58

florian
Administrator

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.


Code allein macht nicht glücklich. Jetzt spenden!

Offline

Liked by:

screamindan, byteworker, better-work, colinax, chap

#2 05.11.2018 12:37:38

byteworker
Mitglied

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.

Online

#3 05.11.2018 12:41:00

florian
Administrator

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.


Code allein macht nicht glücklich. Jetzt spenden!

Offline

Liked by:

byteworker, stefanek

#4 30.12.2018 18:02:41

screamindan
Mitglied

Re: Responsive, mehrstufige Navigation

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

Offline

#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.


... nein in Europa verwenden wir beim Programmieren nicht € statt $ ...

Offline

Fußzeile des Forums

up