WBCE CMS Forum

jonny

Mitglied

Menü mit animation border bottom

Hallo Leute

Ich möchte gerne das Standard-Menü vom Template Simple Responsive ersetzten durch ein ähnliches Menü aber mit Anmiation wie hier:
https://codepen.io/anon/pen/oBMgQE

Ein sehr schönes Beispiel ist auch:
http://kaethundnanei.at/

Die Parameter des aktuellen Menüs anzupassen hat leider nicht geklappt, führte nur zu misslichen Darstellungen (Wie jetzt)
http://zgraggen-zahnarzt.ch/

Ist es möglich das Menü einzubinden, das ich Seiten im Template hinzufügen kann ohne immer die Struktur anzupassen?

LG

Jonny

Beitrag geändert von jonny (07.02.2017 12:20:46)

---

Wer noch etwas Dummheit will soll sich hinten anstellen..

colinax

Developer

Re: Menü mit animation border bottom

Hi nailstylistin08,

die Animation ist komplett über CSS gemacht, optisch funktioniert es leider nur mit Menüs korrekt, die man nicht aufklappen kann.

Wenn du willst kann ich dir den Code von http://kaethundnanei.at/ schicken.

Oder wenn wir beim codepen Beispiel bleiben:

a {
  transition: 0.3s ease;
  background: #3fa46a;
  color: #ffffff;
  font-size: 20px;
  text-decoration: none;
  border-top: 4px solid #3fa46a;
  border-bottom: 4px solid #3fa46a;
  padding: 20px 0;
  margin: 0 20px;
}
a:hover {
  border-top: 0px solid transparent;
  border-bottom: 4px solid #ffffff;
  padding: 6px 0; 
}

jonny

Mitglied

Re: Menü mit animation border bottom

Es wäre der hammer wenn du mir den code von kathe und anei schicken könntest Style vom menü sowie index. php wenn das ginge und dir keine umstände bereitet?

Bei mir sieht das ganze im moment komplizierter aus im css und php. Deshalb wäre ich froh wenn ich das menü ersetzen könnte.

Natürlich nur wenns dir keine umstände macht und oke ist.

Beitrag geändert von jonny (08.02.2017 00:35:47)

---

Wer noch etwas Dummheit will soll sich hinten anstellen..

colinax

Developer

Re: Menü mit animation border bottom

Ja, das kann ich morgen Abend machen.

LG

florian

Administrator

Re: Menü mit animation border bottom

Habe gerade sehr wenig Zeit, deshalb nur ganz kurz: Jonny, Du versuchst, etwas Eckiges durch ein rundes Loch zu drücken, und das kann nicht gehen. Navigationen sind meist extrem komplexe Angelegenheiten, die nicht dafür gedacht sind, miteinander kombiniert zu werden. Es ist insofern also nicht überraschend, dass der Unterstreichungseffekt aus Navigation A nicht in Navigation B funktioniert.

Nimm erstmal komplett alle Styles und Scripte aus dem Template raus, die sich mit der Navigation befassen, und versuche dann, auf der Basis von colinax' Beispiel oder auch hier http://www.dynamicdrive.com/style/cssli … line_menu/ eine neue Navigation zu erstellen; aber beachte, dass diese beiden Beispiele keine Unterseiten darstellen können. Wenn das erforderlich ist, kommen diese also nicht infrage, bzw. Du musst für Unterseiten dann einen gesonderten Navigationsbereich vorsehen.

colinax

Developer

Re: Menü mit animation border bottom

Der Navigation-Code von K&N:

[== HTML ==]
<div role="navigation" class="menu">
<?php show_menu2(1, SM2_ROOT+1, SM2_CURR+1, SM2_ALL, '<li class="lilev_[menu_title]"><a href="[url]" title="[menu_title]" class="[class] navlev[level]">[menu_title]</a>', "</li>", '<ul class="ullev[level]">', "</ul>", true, '<ul class="menu-top">');?>
</div>    

Der Aufbau von SM2 ist auf Multilingual ausgerichtet, der Code sollte aber mit jedem SM2 Aufruf funktionieren.

[== CSS ==]
.menu { float: right; }
.menu ul { list-style-type: none; margin: 5px 0 0 0; padding: 12px 0 0 0; }
.menu ul li { float: left; text-transform: uppercase; position: relative; letter-spacing: 0.2em; margin: 0px 10px 0 15px; }
.menu ul li a { -webkit-transition: all 0.2s ease-in-out; color: #f0f0f0; font-size: 16px; font-weight: 500; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; text-decoration: none; }
.menu ul li a:hover { text-decoration: none; color: #fff; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }
.menu ul li a::after { position: absolute; top: 100%; left: 0; width: 100%; height: 1px; background: white; content: ''; margin-top: 5px; opacity: 0; -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; -moz-transition: opacity 0.3s, -moz-transform 0.3s; transition: opacity 0.3s, transform 0.3s; -webkit-transform: translateY(10px); -moz-transform: translateY(10px); transform: translateY(10px); }
.menu ul li a:hover::after, .menu ul li a:focus::after { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); transform: translateY(0px); }

Navigationen sind meist extrem komplexe Angelegenheiten, sieht man hier im CSS Code.

jonny

Mitglied

Re: Menü mit animation border bottom

Danke @Colinax für deine hilfe. Die option B welche mir noch fehlt ist ein Navigationsmenü mit Sandwich und X Button für die Mobile-User.

Ich möchte wenn möglich ein Unabhängiges dafür haben, wo ich auch submenüs via + öffnen und könnte. Gibt es dafür eine geeignete WBCE lösung?

Sehr warscheinlich dann zusätzlicher css und html eintrag oder?

---

Wer noch etwas Dummheit will soll sich hinten anstellen..

colinax

Developer

Re: Menü mit animation border bottom

Danke @Colinax für deine hilfe. Die option B welche mir noch fehlt ist ein Navigationsmenü mit Sandwich und X Button für die Mobile-User.

Ich möchte wenn möglich ein Unabhängiges dafür haben, wo ich auch submenüs via + öffnen und könnte. Gibt es dafür eine geeignete WBCE lösung?

Sehr warscheinlich dann zusätzlicher css und html eintrag oder?

Das hier müsste helfen:

<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jquery toggle ul.li.ul.li</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<style>
#menu { width: 100%; }
#mainli { padding: 1rem; width: 300px; height: auto; list-style-type: none; background: #111; color: white; border: 2px solid white; float: left; }
#topi { padding: 1rem; background: #222; }
#topi li { height: auto; padding: 12px; }
#topo { padding: 1rem; background: #333; }
li { list-style-type: none; }
a { color: white; text-decoration: none; }
.x:before { content: " \25bc\ "; cursor: pointer; }
.x.ud:before { content: " \25b2\ "; }
</style>
<script>
$(function() {
    $('#menu > li > ul').hide();
    $('#menu > li > ul').click(function(event){ event.stopPropagation(); });
    $('#menu > li > ul > li > ul').hide();
    $('#menu > li > ul > li > ul').click(function(event){ event.stopPropagation(); });
    $('#menu li').click(function() { $(this).children('ul').slideToggle(500); $(this).toggleClass('ud'); });
    $('#menu li p').click(function() { $(this).toggleClass('ud'); });
});
</script>
</head>

<body>
<ul id="menu">
  <li class="x" id="mainli">AKTUELLES
    <ul id="topi">
      <li class="x" ><a href="#">Menu-link</a>
        <ul id="topo">
          <li><a href="#">Menu-link</a></li>
          <li><a href="#">Menu-link</a></li>
          <li><a href="#">Menu-link</a></li>
        </ul>
      </li>
      <li><a href="#">Menu-link</a></li>
      <li><a href="#">Menu-link</a></li>
    </ul>
  </li>
  <li class="x" id="mainli">AKTUELLES
    <ul id="topi">
      <li><a href="#">Menu-link</a></li>
      <li><a href="#">Menu-link</a></li>
      <li><a href="#">Menu-link</a></li>
    </ul>
  </li>
</ul>
</body>
</html>