CSS3 Mega Drop-Down Menu |
|
|
Veteran Mitglied
|
Paramedic Geschrieben am 21.04.2012 um 20:05 |
|
Hallo zusammen,
ich versuche derzeit das im Betreff genannte Menu einzubauen. Leider habe ich keine Ahnung wie genau ich das einbauen kann.
PHP-Fusion Version
Ich nutze V 7.01.06
Gedownloadet von:
http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/
Theme:
Ich nutze ein eigenes Theme.
Wär könnte mir beim Einbau helfen ?
LG |
|
|
|
Senior Mitglied
|
Layzee Geschrieben am 21.04.2012 um 20:08 |
|
Es gibt für das Ding im Grunde zwei sinnvolle mögliche Stellen:
/themes/templates/header.php
/themes/DEINTHEME/theme.php
In der header.php kannst Du es "fest" verbauen, sprich einen fixen Ort wählen (oben wäre dann sinnvoll), in der theme.php baust Du es sinnigerweise da ein, wo die Funktion "showsublinks" aufgerufen wird. |
|
|
|
Veteran Mitglied
|
Paramedic Geschrieben am 21.04.2012 um 20:11 |
|
Danke für deine Antwort.
1. Ich habe mich mit dem Einbauen da noch nie wirklich befasst. Ich hatte es in meiner theme.php mal eingebaut aber hatte irgendwas vergessen da es nicht funktioniert hatte bzw. Anzeigefehler da waren.
2. Wie müsste ich das in die header.php einbauen gibts vllt. da irgendwie ne Stelle ? |
|
|
|
Senior Mitglied
|
Layzee Geschrieben am 21.04.2012 um 20:17 |
|
Da die Position es ganzen Dings über die CSS festgelegt wird, brauchst Du doch im Prinzip in die header.php nur die stylesheet-verlinkung und eben den Code vom Menü selbst einsetzen.
Die Stelle ist im Grunde egal.
Am einfachsten setzt Du den ganzen Code als HTML (so wie er ist) nach dem ?>, also ganz ans Ende der Datei.
Genauso hab ich das HIER auch gemacht. |
Bearbeitet von Layzee am 21.04.2012 um 20:18
|
|
|
|
Veteran Mitglied
|
Paramedic Geschrieben am 21.04.2012 um 20:20 |
|
@ Layzee:
Hmm ok - Mal versuchen
@ Dmaus:
Die halbe seite meiner Homepage war mit dem benannten Menu, also es war alles aufgeglappt und untereinander. Hatte sicherlich irgendwas in der theme.php vergessen.
Ich werds nochmal probieren eben. |
|
|
|
Senior Mitglied
|
Layzee Geschrieben am 21.04.2012 um 20:22 |
|
Ja, bei dem Fehler hast Du einfach die Stylesheet falsch verlinkt, sprich da stimmte der Pfad zur .css nicht. Dann haut er das Menü ohne Klassen auf die HP, was ja logisch ist, denn der eigentliche Code wird ja abgearbeitet. |
Bearbeitet von Layzee am 21.04.2012 um 20:23
|
|
|
|
Senior Mitglied
|
Layzee Geschrieben am 21.04.2012 um 20:23 |
|
DMaus die braucht man nicht in die style.css des Themes eintragen, man kann sie auch "extern" verlinken...nur da muss dann halt auch der Pfad stimmen. |
|
|
|
Veteran Mitglied
|
Paramedic Geschrieben am 21.04.2012 um 20:31 |
|
So, ich habe mir nun zur Hilfe auch mal das Theme "Schloss" zur Hilfe genommen und Codeteile raus gesucht.
Hier ein Anzeigefehler:
Vielleich kann sich einer mal die theme.php und die Style.css anschauen.
Eventuell sogar korregieren.
IM Anhang die dateien.
LG |
|
|
|
Senior Mitglied
|
Layzee Geschrieben am 21.04.2012 um 20:32 |
|
Noch kurz zur Erklärung der Verlinkung zu einer externen .css:
Leg Sie irgendwo auf den Server, sinnigerweise direkt in den themes.Ordner und verlinke die Datei am ANFANG des Menücodes mit:
<link rel="stylesheet" href="http://pfad zur css/menu.css" type="text/css" media="screen" />
Es geht natürlich auch mit relativen Pfaden... |
|
|
|
Senior Mitglied
|
Layzee Geschrieben am 21.04.2012 um 20:35 |
|
Rescue, Du musst dem entsprechenden Container in der .css einfach die richtige Breite zuweisen...
Such in der css nach
.dropdown_1column {width: 140px;}
Und mach es einfach breiter |
|
|
|
Veteran Mitglied
|
Paramedic Geschrieben am 21.04.2012 um 20:36 |
|
Wenn ich das aber breiter mache, mach ich damit doch auch die Komplette Page breiter oder liege ich damit falsch ? |
|
|
|
Senior Mitglied
|
Layzee Geschrieben am 21.04.2012 um 20:38 |
|
Nein, weil diese Breite NUR für das dropdown gilt, also das was "aufgeklappt" wird. Die Breite des Menüs ansich bleibt davon unberührt. |
|
|
|
Veteran Mitglied
|
Paramedic Geschrieben am 21.04.2012 um 20:40 |
|
@Dmaus:
Die dateien getestet und folgendes Ergebnis kam raus:
@Layzee:
Ich probier das mal aus.. |
|
|
|
Senior Mitglied
|
Layzee Geschrieben am 21.04.2012 um 20:42 |
|
DMaus es reicht doch wenn er die Breite ändert... was murkst Du denn da rum?! |
|
|
|
Veteran Mitglied
|
Paramedic Geschrieben am 21.04.2012 um 20:45 |
|
@ Dmaus:
Hier mal das komplette Theme. |
|
|
|
Veteran Mitglied
|
Paramedic Geschrieben am 21.04.2012 um 21:43 |
|
Danke euch zweien, da es soweit Funktioniert. Kann man sagen "Thread Closed". |
|
|
|
Mitglied
|
Also ich ahbe mir das menü auch runtergeladen !! wo genau wird das denn eingefügt ? Ganz normal in den Root Ordner ?? Und was wird dann wie verlinkt ? |
|
|
|
Mitglied
|
Und definiert wiurd das ganze komplett über die Style.css ? Eingebaut habe ich es ist voll simpel :-) Also muss es jedesmal individuell angepasst werden richtig ? Also an jedes theme neu ?
Nur frage ich mich jetzt gerade wozu ist diese Datei hier da ?
Ncsshover3.htc
<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> |
|
|
|
Senior Mitglied
|
Layzee Geschrieben am 07.07.2012 um 15:42 |
|
Die Reihenfolge von Elementen einer Webseite wird über den sogenannten "z-index" (CSS) gesteuert. (z-index: xxxx;) Je höher die Zahl (kann von 1 bis 9999 gehen) X, desto weiter vorne liegt das Element. z-index funktioniert nur in Verbindung mit einer Angabe zur Position des Elements, also beispielsweise "position: absolute;"
Die Dropdowncontainer bräuchten also diese Angabe(n).
Weitere Informationen dazu findest Du HIER.
Ausserdem hast Du im Menü ein Kollations- bzw Umlauteproblem.
Schreib die Umlaute ä,ö,ü im Menu so:
ä=ä
ö=ö // zb Hörer statt Hörer
ü=ü // zb Menü statt Menü
Auch wenn es eine (oder sogar mehrere) Anleitungen für dieses Mega-Dropdown-Menü gibt, Du wirst um Grundkenntnisse in HTML und CSS (PHP brauchst Du dafür garnicht!) nicht herumkommen wenn Du es anständig anpassen willst. Das fängt schon mit den Containern im Menü "Radio" an, die durch zuviel Text zu gross werden, da fehlt dann unten die Hälfte wenn man es so lässt. Es müsste also auch der Container selbst nach unten hin verlängert/erweitert werden. |
Bearbeitet von Layzee am 07.07.2012 um 16:02
|
|
|
|
Senior Mitglied
|
Ragdoll Geschrieben am 16.07.2012 um 16:34 |
|
mal 2-3 geändert? und nicht immer nur einen? manchmal sind 2-3 für eine sache verantwortlich. |
|
|