Tutorials

Eine immer größer werdende Tutorialdatenbank.

PHP-Fusion Core

Aktuelle PHP-Fusion Vollversionen und Updates

Addon Downloads

Alle Downloads garantiert Kostenlos

Support 24/7

24 Stunden, 7 Tage die Woche, das ganze Jahr.

Thema ansehen
CSS3 Mega Drop-Down Menu Thema drucken
Benutzeravatar

Veteran Mitglied


Paramedic Geschrieben am 21.04.2012 um 20:05
 #1 Beitrag drucken Top
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
Beiträge: 577 
http://4friends.mod-rescue.de 
Benutzeravatar

Senior Mitglied


Layzee Geschrieben am 21.04.2012 um 20:08
 #2 Beitrag drucken Top
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.
Beiträge: 280 
http://der-nachtfalke.net 
Benutzeravatar

Veteran Mitglied


Paramedic Geschrieben am 21.04.2012 um 20:11
 #3 Beitrag drucken Top
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 ?
Beiträge: 577 
http://4friends.mod-rescue.de 
Benutzeravatar

Senior Mitglied


Layzee Geschrieben am 21.04.2012 um 20:17
 #4 Beitrag drucken Top
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
Beiträge: 280 
http://der-nachtfalke.net 
Benutzeravatar

Veteran Mitglied


Paramedic Geschrieben am 21.04.2012 um 20:20
 #5 Beitrag drucken Top
@ 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.
Beiträge: 577 
http://4friends.mod-rescue.de 
Benutzeravatar

Senior Mitglied


Layzee Geschrieben am 21.04.2012 um 20:22
 #6 Beitrag drucken Top
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
Beiträge: 280 
http://der-nachtfalke.net 
Benutzeravatar

Senior Mitglied


Layzee Geschrieben am 21.04.2012 um 20:23
 #7 Beitrag drucken Top
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.
Beiträge: 280 
http://der-nachtfalke.net 
Benutzeravatar

Veteran Mitglied


Paramedic Geschrieben am 21.04.2012 um 20:31
 #8 Beitrag drucken Top
So, ich habe mir nun zur Hilfe auch mal das Theme "Schloss" zur Hilfe genommen und Codeteile raus gesucht.

Hier ein Anzeigefehler:
img856.imageshack.us/img856/4736/screennb.jpg


Vielleich kann sich einer mal die theme.php und die Style.css anschauen.
Eventuell sogar korregieren.

IM Anhang die dateien.


LG
Paramedic hat folgende Datei angehängt:  themephp_und_stylecss.rar [7.25kB / 1605 mal Heruntergeladen]
Beiträge: 577 
http://4friends.mod-rescue.de 
Benutzeravatar

Senior Mitglied


Layzee Geschrieben am 21.04.2012 um 20:32
 #9 Beitrag drucken Top
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...
Beiträge: 280 
http://der-nachtfalke.net 
Benutzeravatar

Senior Mitglied


Layzee Geschrieben am 21.04.2012 um 20:35
 #10 Beitrag drucken Top
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 Wink
Beiträge: 280 
http://der-nachtfalke.net 
Benutzeravatar

Veteran Mitglied


Paramedic Geschrieben am 21.04.2012 um 20:36
 #11 Beitrag drucken Top
Wenn ich das aber breiter mache, mach ich damit doch auch die Komplette Page breiter oder liege ich damit falsch ?
Beiträge: 577 
http://4friends.mod-rescue.de 
Benutzeravatar

Senior Mitglied


Layzee Geschrieben am 21.04.2012 um 20:38
 #12 Beitrag drucken Top
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.
Beiträge: 280 
http://der-nachtfalke.net 
Benutzeravatar

Veteran Mitglied


Paramedic Geschrieben am 21.04.2012 um 20:40
 #13 Beitrag drucken Top
@Dmaus:
Die dateien getestet und folgendes Ergebnis kam raus:
img17.imageshack.us/img17/6050/screensho.jpg

@Layzee:
Ich probier das mal aus..
Beiträge: 577 
http://4friends.mod-rescue.de 
Benutzeravatar

Senior Mitglied


Layzee Geschrieben am 21.04.2012 um 20:42
 #14 Beitrag drucken Top
DMaus es reicht doch wenn er die Breite ändert... was murkst Du denn da rum?! Wink
Beiträge: 280 
http://der-nachtfalke.net 
Benutzeravatar

Veteran Mitglied


Paramedic Geschrieben am 21.04.2012 um 20:45
 #15 Beitrag drucken Top
@ Dmaus:
Hier mal das komplette Theme.
Paramedic hat folgende Datei angehängt:  mrcommunity_newstyle.rar [129.18kB / 1604 mal Heruntergeladen]
Beiträge: 577 
http://4friends.mod-rescue.de 
Benutzeravatar

Veteran Mitglied


Paramedic Geschrieben am 21.04.2012 um 21:43
 #16 Beitrag drucken Top
Danke euch zweien, da es soweit Funktioniert. Kann man sagen "Thread Closed".
Beiträge: 577 
http://4friends.mod-rescue.de 
Benutzeravatar

Mitglied


bvbfanessen Geschrieben am 22.04.2012 um 14:56
 #17 Beitrag drucken Top
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 ?
Beiträge: 191 
http://www.svunionfrintrop.de 
Benutzeravatar

Mitglied


bvbfanessen Geschrieben am 22.04.2012 um 16:00
 #18 Beitrag drucken Top
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>
Beiträge: 191 
http://www.svunionfrintrop.de 
Benutzeravatar

Senior Mitglied


Layzee Geschrieben am 07.07.2012 um 15:42
 #19 Beitrag drucken Top
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:

ä=&auml;
ö=&ouml; // zb H&ouml;rer statt Hörer
ü=&uuml; // zb Men&uuml; 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
Beiträge: 280 
http://der-nachtfalke.net 
Benutzeravatar

Senior Mitglied


Ragdoll Geschrieben am 16.07.2012 um 16:34
 #20 Beitrag drucken Top
mal 2-3 geändert? und nicht immer nur einen? manchmal sind 2-3 für eine sache verantwortlich. Smile
Beiträge: 225 
Springe ins Forum:
Anzeige


Anmelden


Registrieren Passwort vergessen

RSS Feeds

Feeds abonieren

Letzte News
Letzte Threads
Anzeige

© Copyright 2024 PHP-Fusion.at | Alle Rechte vorbehalten.

© 2016 Real Space. All rights reserved | Design by W3layouts | 19,818,704 eindeutige Besuche
Powered by PHP-Fusion copyright © 2002 - 2024 by Nick Jones. Released as free software without warranties under GNU Affero GPL v3.