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.

Online

Liked by:

screamindan, byteworker, better-work, colinax

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

Online

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

Online

Liked by:

byteworker, stefanek

Board footer

Powered by FluxBB

up