Suche im Forum:
Suchen


Autor Nachricht
Beitrag06.08.2012 um 16:20 (UTC)    
Titel: CSS-Design: Coolmenü/Klappmenü aus vorgegeben. standard Navi

Hallo,

hier mal eine Möglichkeit beim CSS-Design aus der vorgegebenen standard Navi ein Coolmenü zu machen. Die Links werden ganz normal über den Seiten-Editor eingefügt. Die Hauptpunkte entsprechen also den Hauptseiten und die Menüpunkte, die ausgeklappt werden den entsprechenden Unterseiten.


Vorteile:
Arrow keine zusätzlichen Elemente nötig
Arrow kein positionieren nötig
Arrow Navigation ist direkt ins Html des Designs integriert
Arrow hinzufügen bzw. löschen von Links ganz automatisch über den Seiten-Editor


Beispiel:
http://tttttest.de.tl


Code:

Text unter dem Design:

Zitat:
<script type="text/javascript">CoolMenu=function(){var a,b=document.getElementById("nav").getElementsByTagName("li"),d;this.getSubMenuByRequest=function(a){var c=null;try{c=new XMLHttpRequest}catch(d){try{c=new ActiveXObject("Microsoft.XMLHTTP")}catch(b){try{c=new ActiveXObject("Msxml2.XMLHTTP")}catch(f){c=null}}}c&&(c.parent=a,c.open("GET",a.main.getElementsByTagName("a")[0].href,!0),c.onreadystatechange=function(){if(4==this.readyState){var a,d=document.createElement("ul");a=document.createElement("div");var b=c.responseText.indexOf("<body")+
5,e=c.responseText.indexOf("</body>");a.innerHTML=c.responseText.substr(b,e-b);b=a.querySelectorAll("#nav > li.subpage");for(a=0;a<b.length;a++)d.appendChild(b[a]);this.parent.main.appendChild(d)}},c.send(null))};d=document.querySelectorAll("li.subpage");for(a=0;a<d.length;a++)d[a].parentNode.removeChild(d[a]);for(a=0;a<b.length;a++)-1==b[a].className.indexOf("subpage")&&(b[a].getElementsByTagName("a")[0]&&-1!=b[a].getElementsByTagName("a")[0].className.indexOf("menu"))&&(d=new MenuPoint(b[a].id),
this.getSubMenuByRequest(d));document.getElementById("nav_container").style.height=document.getElementById("nav").offsetHeight+"px"};MenuPoint=function(a){this.main=document.getElementById(a);this.subMenu};new CoolMenu;</script>


CSS-Code ohne Style-Tags:
Zitat:

#nav_container{position:relative;}
#nav{position:absolute;}
#nav > li{float: left;}
#nav li ul{display:none;}
#nav li:hover ul{display:block;}

Das CSS ist hier auf die Funktionalität des Menüs beschränkt. Zum gestalten findet ihr hier alle Klassen und Ids, die ihr dazu benötigt:
http://www.homepage-baukasten.de/forum/viewtopic.php?t=100611
______________
mfg
o-4-n

"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]

*** Die Suchfunktion ist KEINE tödliche Krankheit! ***

Eventplanung, Equipment, Zeltverleih, Catering
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de