|
|
Latest News |
Latest Threads |
|
 |
55.484 Posts & 4.945 Themen in 78 Foren |
|
|
|
 |
Forensuche |
|
Suchbegriff |
Benutzerauswahl |
Ergebnisse anzeigen |
 |
 |
Vertikales Dropdown Menu 17 Beiträge in diesem Thema |
|
|
 |
|
 |
03.04.2013 - 16:00 Uhr |
|
|
|
Hallo,
ich wollte auf meiner neuen Seite ein vertikales Dropdown Menu in den Navboxen einbauen, dass beim Mouseover weitere Links ausführt. Vom Prinzip her also wie im Windows-Menü.
Ich habe durch die Forensuche diesen schon etwas älteren Thread gefunden. DHTML-(oder JS-)Menü in NavBox Ich denke, dass es da genau um das ging.
Auf der von ihm geposteten Seite ist auch oben links genau das was ich meine ...
Ich habe natürlich auch vorher google benutzt und bin auch auf der Seite gelandet die Webi gepostet hat.
Meine Frage wäre nun aber erstmal ob man das zwangsläufig mit Javascript machen muss oder gibt es da einfachere Wege?
Danke schonmal für die Hilfe.
lg
|
|
|
|
|
|
|
 |
|
 |
03.04.2013 - 16:59 Uhr |
|
|
|
Grundsätzlich ist das einbinden solcher DropDown-Menüs möglich. Vor etwas über einem Jahr gab es solch eine Frage im Forum, klick. Allerdings läuft das über Javascript - wobei sowas auch über CSS funktioniert. Bspw. hier zu finden.
Die Sache ist nur die, das so gut wie jedes DropDown-Menü anders eingebunden wird. Meistens haben die Menüs zwar die relativ gleiche Struktur, aber die Referenzpunkte sind meist unterschiedlich - eine Art Standard gibt es nicht, was nicht gerade für die Endbenutzer förderlich ist  Aber künstlerische Freiheit muss halt sein ;o
Wie dem auch sein - selbst wenn man eine Art Standard-Variante für sowas macht, ist leider nicht garantiert, das jedes DropDown-Menü, mit Referenz-Anpassung, einfach funktioniert  Das ist, wenn man so möchte, eine spezifische Arbeit auf das gewünschte DropDown-Menü
So, das sollte erstmal an Antworten reichen ;o
|
|
|
|
|
|
|
 |
|
 |
03.04.2013 - 17:26 Uhr |
|
|
|
|
|
|
 |
|
 |
03.04.2013 - 18:05 Uhr |
|
|
|
Weißt du vielleicht ob man diese Dateien noch irgendwie runterladen kann?
Der Download aus deinem 1. Post funktioniert ja nicht. Und mit dem 1. Post von ihm komm ich ja in ein normales Forum wo es keine D-Loads gibt ...
|
Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von Obumba - 03.04.2013 - 18:10 Uhr |
|
|
|
|
|
|
|
 |
|
 |
04.04.2013 - 17:18 Uhr |
|
|
|
Wenn du CSSMenuMaker.com meinst - einfach auf ein beliebiges Menü klicken. Auf der Detail-Seite gibt es zwischen der Vorschau (oben) und den Kommentaren (unten) den Punkt Customize - hiermit kommst du in den Einstellungsbereich, wo man es nach eigenen Vorstellung es anpassen kann. In der Mitte gibt es oberhalb der Vorschau (Preview) die zwei Tabs HTML und CSS, wo man sich jenen Code angucken kann (und ggf. kopieren). Unterhalb der o.g. drei Tabs gibt es den Button Download.
Natürlich reicht dies nicht, wenn man dies dynamisch ins phpKit einbinden möchte. Aber für festen HTML-Code würde das reichen
--
Was das andere angeht:
Der Thread bei Kit-Spiele ist zwar weg, und hat im Grunde auch keine nennenswerten Informationen, aber das ist auch nicht wichtig. Der ganze Verlauf ist in den von mir verlinkten Thread hier auf HTH-C. Wenn du es über JavaScript laufen lassen möchtest, müsstest im Grunde nur den Thread-Verlauf folgen. Ist allerdings für die obere Navigation angepasst, ginge aber auch für die anderen mit etwas Anpassung 
|
|
|
|
|
|
|
 |
|
 |
04.04.2013 - 18:53 Uhr |
|
|
|
Gut Danke dir erstmal ... werde mir das dann morgen mal anschauen und gegebenenfalls nochmal nachfragen.
|
|
|
|
|
|
|
 |
WEBI Unberechenbares Urgestein |
 |
|
|
|
|
|
|
|
|
 |
04.04.2013 - 19:40 Uhr |
|
|
|
|
|
|
 |
|
 |
05.04.2013 - 11:37 Uhr |
|
|
|
Ok vielen Dank das hat mir sehr geholfen. 
|
|
|
|
|
|
|
 |
|
 |
02.05.2013 - 11:09 Uhr |
|
|
|
Hallo,
ich nochmal ...
Ich habe mir nun bei der von k!r!ka geposteten Seite ein Menü rausgenommen und das ganze etwas abgeändert.
Im Prinzip funktioniert auch alles wunderbar ... nur leider klappt im wunderschönen Internet Explorer natürlich gar nix und es fliegt kein Menü aus. 
Hier wäre mal der CSS Code ...
Hier klicken zum aufklappen
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 | | Quellcode
/* Some stylesheet reset */
#cssmenu > ul {
list-style: none;
margin: 0;
padding: 0;
vertical-align: baseline;
line-height: 1;
}
/* The container */
#cssmenu > ul {
display: block;
position: relative;
width: 162px;
}
/* The list elements which contain the links */
#cssmenu > ul li {
display: block;
position: relative;
margin: 0;
padding: 0;
width: 162px;
}
/* General link styling */
#cssmenu > ul li a {
/* Layout */
display: block;
position: relative;
margin: 0;
padding: 5px 8px;
width: 148px;
/* Typography */
font-family: Verdana, Arial, sans-serif;
color: #ffffff;
text-decoration: none;
text-shadow: 0 1px 1px #000;
font-weight: bold;
font-size: 12px;
/* Background & effects */
display : block;
vertical-align : middle;
margin-left:-5px;
background:url({IMAGEDIR}/navlink.jpg) no-repeat;
height : 25px;
padding:5px 0px 0px 20px;
}
/* Rounded corners for the first link of the menu/submenus */
#cssmenu > ul li:first-child>a {
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-top: 0;
}
/* Rounded corners for the last link of the menu/submenus */
#cssmenu > ul li:last-child>a {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom: 0;
}
/* The hover state of the menu/submenu links */
#cssmenu > ul li>a:hover, #cssmenu > ul li:hover>a {
color: #fff;
text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
background:url({IMAGEDIR}/navlink.jpg) no-repeat;
background-position:0px -25px;
}
/* The arrow indicating a submenu */
#cssmenu > ul .has-sub>a::after {
content: '';
position: absolute;
top: 8px;
right: 1px;
width: 0px;
height: 0px;
/* Creating the arrow using borders */
border: 4px solid transparent;
border-left: 4px solid #d8d8d8;
}
/* The same arrow, but with a darker color, to create the shadow effect */
#cssmenu > ul .has-sub>a::before {
content: '';
position: fixed;
top: 0px;
right: 0px;
width: 0px;
height: 0px;
/* Creating the arrow using borders */
border: 4px solid transparent;
border-left: 4px solid #000;
}
/* Changing the color of the arrow on hover */
#cssmenu > ul li>a:hover::after, #cssmenu > ul li:hover>a::after {
border-left: 4px solid #ff0000;
}
#cssmenu > ul li>a:hover::before, #cssmenu > ul li:hover>a::before {
border-left: 4px solid #fff;
}
/* THE SUBMENUS */
#cssmenu > ul ul {
position: absolute;
left: 162px;
top: -9999px;
padding-left: 5px;
opacity: 0;
/* The fade effect, created using an opacity transition */
-webkit-transition: opacity .3s ease-in;
-moz-transition: opacity .3s ease-in;
-o-transition: opacity .3s ease-in;
-ms-transition: opacity .3s ease-in;
}
/* Showing the submenu when the user is hovering the parent link */
#cssmenu > ul li:hover>ul {
top: 0px;
opacity: 1;
}
| |  |
Habe schon viel rumprobiert aber leider reichen meine Kenntnisse wohl eher nicht aus. Gibt es eine Möglichkeit das hinzubekommen?
Link zur Seite:
|
|
|
|
|
|
|
 |
|
 |
02.05.2013 - 17:18 Uhr |
|
|
|
Wenn es um den IE < 7oder 8 handelt - da kannst du sowas eh vergessen. Sowas geht da zwar auch, aber nur mit viel rumgetrickse.
Als Erklärung warum:
Der alte IE, und was weiss ich noch für Browser, kann kein CSS2. Erst in dieser Version ist es möglich mehr als nur a-Tags mit Pseudo-Klassen wie :hover anzusteuern.
Für den IE mit CSS1 gibt es den Trick durch ein a-Tag, das sozusagen als Ersatz für den eigentlichen Tag dient. Bin mir jetzt aber nicht sicher, ob dies für mehr als eine Ebene funktioniert
Ein kleines Beispiel für o.g.:
| Quellcode <ul>
<li>Irgendein Text</li>
<li>
<!--[if IE]><a><![endif]-->
<ul>
<li>Irgendein UnterText</li>
</ul>
<!--[if IE]></a><![endif]-->
</li>
</ul> | |
In Normalfall wird im Browser nur die Auflistung durch ul -> li angesteuert. Wenn man mit den IE (ohne Versions-Unterschied) unterwegs wäre, würde jetzt zwischen den li-Tags ein a-Tag hinzugefügt. Diese könnte man jetzt ansteuern und entsprechend einstellen. Aber wie gesagt, ich weiss nicht, wie es mit weiteren Unterebenen ist
Wenn man nur bestimmte IE Versionen ansprechen möchte, hier gibt es eine grobe Übersicht.
|
|
|
|
|
|
|
 |
|
 |
|
 |
03.05.2013 - 13:28 Uhr |
|
|
|
if IE braucht man bei aktuelleren Versionen auch selten verwenden. Ist halt für ältere Versionen und oder als Weiche.
Das es bei dir aber nicht funktioniert - kann ich nicht verstehen. Der 10er kann mind. das, was der 8er kann und im 8er funktioniert es bei mir  Hab mir mal den IETester runtergeladen und installiert - und ab den 8er gibt es keine Probleme
Einziges, was mir an deinen Code stört, ist das fehlende div-Tag vor und hinter den ersten ul-Tag, sprich so:
| Quellcode <div id='cssmenu'>
<ul>
<li class='has-sub last'><a href='#'><span><img width="16" src="/lmo/img/liga/1. Euroleague.png"> 1. Euroleague</span></a>
<ul>
<li><a href='?path=content&contentid=13'><span><img width="16" src="/lmo/img/liga/1. Euroleague.png"> Tabelle</span></a></li>
<li><a href='?path=content&contentid=16'><span><img width="16" src="/content/images/pep.png"> Trainer</span></a></li>
<li><a href='?path=content&contentid=20'><span><img width="16" src="/content/images/neuer.png"> Weiße Weste</span></a></li>
<li class='last'><a href='?path=forumscategory&catid=10'><span><img width="16" src="/content/images/icons/ball.png"> Ergebnismeldung</span></a></li>
</ul>
</li>
</ul>
</div> | |
Fehlte vielleicht dieser Part? Hab hier mal ein Bild hochgeladen, wie es beim IETester aussieht (als wenn man mit der Maus drüber fahren würde).

|
|
|
|
|
|
|
 |
|
 |
03.05.2013 - 13:52 Uhr |
|
|
|
Also den Div tag hab ich natürlich drin ... hab jetzt der Übersicht halber nicht das Ganze Menü reingetan.
Ich habe jetzt gerade einfach mal nur den Code von dir reingesetzt und eben den CSS Code und auch da fährt bei mir nichts aus ... 
Geht halt nur nicht im Internet Explorer. :/
|
|
|
|
|
|
|
 |
|
 |
03.05.2013 - 14:11 Uhr |
|
|
|
Ich ging eh nicht davon aus, das der div-Part fehlte - war nur der Sicherhaltshalber nachgefragt ;o
Hast du den Code in einer seperaten Datei zum testen oder hast das schon irgendwie auf deiner Seite eingebunden? Wenn ersteres - hast du am Anfang folgendes drin?
| Quellcode <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
Obigen Code von deiner Seite ;o
Ohne dies verarbeitet der IE das teilweise oder gar nicht 
|
|
|
|
|
|
|
 |
Ähnliche Themen |
|
|
|
|
|
|
|
|