Suche ein bestimmtes Drop Down Menü

Alice

Erfahrenes Mitglied
Hallo.

Ich suche ein bestimmtes Drop Down Menü, wo man auch Kategorien erstellen kann. Also ein Menü mir zwei Ebenen.

Ich habe das hier gefunden: http://www.designchemical.com/lab/jquery-mega-drop-down-menu-plugin/examples/

Aber dieses Menü braucht wohl JS oder so ähnlich und daher kommt in nicht in Frage weil User von mir gibt, die JS deaktivert haben.

Mir ist ganz wichtig das die Link in Kategorien eingeteilt werden können. Also eine "Überschrift" für die Links.

So nicht:
Link 1
Link 2
Link 3
Link 4
Link 5

So:
Kategorie 1
Link 1
Link 2
Kategorie 2
Link 3
Link 4
Kategorie 3
Link 5

Halt wie im Link oben aber lauffähig ohne JS.

DANKE im Vorraus.
 

ComFreek

Mod | @comfreek
Moderator
Wo siehst du denn dort JavaScript?

Ist - soweit ich das nicht überlesen habe - alles in CSS 3 und HTML!
 

Alice

Erfahrenes Mitglied
Wenn ich das Menü downloade, ist im Paket eine "HTC Datei" und ohne diese Datei läuft das Menü nicht. JS, QJuery oder so?

PHP:
<public:attach event="ondocumentready" onevent="CSSHover()" />
<script>
/**
 * Whatever:hover - V3.11
 * http://www.xs4all.nl/~peterned/
 *	
 * Copyright (c) 2009 Peter Nederlof
 * Licensed under the LGPL license
 * http://creativecommons.org/licenses/LGPL/2.1
 */
window.CSSHover=(function(){var m=/(^|\s)((([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active|focus))/i;var n=/(.*?)\:(hover|active|focus)/i;var o=/[^:]+:([a-z\-]+).*/i;var p=/(\.([a-z0-9_\-]+):[a-z]+)|(:[a-z]+)/gi;var q=/\.([a-z0-9_\-]*on(hover|active|focus))/i;var s=/msie (5|6|7)/i;var t=/backcompat/i;var u={index:0,list:['text-kashida','text-kashida-space','text-justify'],get:function(){return this.list[(this.index++)%this.list.length]}};var v=function(c){return c.replace(/-(.)/mg,function(a,b){return b.toUpperCase()})};var w={elements:[],callbacks:{},init:function(){if(!s.test(navigator.userAgent)&&!t.test(window.document.compatMode)){return}var a=window.document.styleSheets,l=a.length;for(var i=0;i<l;i++){this.parseStylesheet(a[i])}},parseStylesheet:function(a){if(a.imports){try{var b=a.imports;var l=b.length;for(var i=0;i<l;i++){this.parseStylesheet(a.imports[i])}}catch(securityException){}}try{var c=a.rules;var r=c.length;for(var j=0;j<r;j++){this.parseCSSRule(c[j],a)}}catch(someException){}},parseCSSRule:function(a,b){var c=a.selectorText;if(m.test(c)){var d=a.style.cssText;var e=n.exec(c)[1];var f=c.replace(o,'on$1');var g=c.replace(p,'.$2'+f);var h=q.exec(g)[1];var i=e+h;if(!this.callbacks[i]){var j=u.get();var k=v(j);b.addRule(e,j+':expression(CSSHover(this, "'+f+'", "'+h+'", "'+k+'"))');this.callbacks[i]=true}b.addRule(g,d)}},patch:function(a,b,c,d){try{var f=a.parentNode.currentStyle[d];a.style[d]=f}catch(e){a.runtimeStyle[d]=''}if(!a.csshover){a.csshover=[]}if(!a.csshover[ C]){a.csshover[ C]=true;var g=new CSSHoverElement(a,b,c);this.elements.push(g)}return b},unload:function(){try{var l=this.elements.length;for(var i=0;i<l;i++){this.elements[i].unload()}this.elements=[];this.callbacks={}}catch(e){}}};var x={onhover:{activator:'onmouseenter',deactivator:'onmouseleave'},onactive:{activator:'onmousedown',deactivator:'onmouseup'},onfocus:{activator:'onfocus',deactivator:'onblur'}};function CSSHoverElement(a,b,c){this.node=a;this.type=b;var d=new RegExp('(^|\\s)'+c+'(\\s|$)','g');this.activator=function(){a.className+=' '+c};this.deactivator=function(){a.className=a.className.replace(d,' ')};a.attachEvent(x[b].activator,this.activator);a.attachEvent(x[b].deactivator,this.deactivator)}CSSHoverElement.prototype={unload:function(){this.node.detachEvent(x[this.type].activator,this.activator);this.node.detachEvent(x[this.type].deactivator,this.deactivator);this.activator=null;this.deactivator=null;this.node=null;this.type=null}};window.attachEvent('onbeforeunload',function(){w.unload()});return function(a,b,c,d){if(a){return w.patch(a,b,c,d)}else{w.init()}}})();
</script>
 

ComFreek

Mod | @comfreek
Moderator
Das ist ein kleines Skript für den IE 6, damit es dort auch funktioniert.
Somit sollte es in anderen Browsern einwandfrei funktionieren.

Siehe auch Step 6 im verlinkten Artikel.
 

Neue Beiträge