Servus Leute,
angenommen ich habe eine Überschrift: <h1> Text :2017 </h1>
Nun möchte ich, dass beim drübergehen des Cursors NUR ÜBER "2017"ein "Menü nach unten ausklappt (die Seite drunter nicht beeinflußt, also nicht nach unten verschiebt o.Ä) und man bspw. 2016 / 2015 / 2014 etc. auswählen kann. Diese würden dann zu einer anderen .html Seite verlinkungen erhalten.Wie bekommt man sowas hin?
LG
Das hängt von so vielen Dingen ab, die du nicht erwähnst... Wie wird das 2017 eingesetzt, wo kommt das her? Wo kommt das aufklappende Menü her? Als Modul angelegt oder händisch geschnitzt? Welches Grid-System verwendest du? Bootstrap 2 oder 3 oder ... ? Kennst dich mit JLyouts aus? Kennst dich mit Overrides aus? Weißt wie man ein Modul ohne Position rendert? Und vieles mehr...
Da in Touchscreenzeiten sowieso ein Dropdown bei Klick besser ist als Hover, könntest, falls du Bootstrap verwendest mal in der Bootstrap-Doku mit Dropdowns und Buttons beschäftigen.
BS3
http://getbootstrap.com/components/#dropdowns
http://getbootstrap.com/javascript/#dropdowns
BS2
http://getbootstrap.com/2.3.2/components.html#dropdowns
http://getbootstrap.com/2.3.2/javascript.html#dropdowns
Wie Re:Later schon schreibt, sind viele Fragen offen.
Vielleicht ist diese jQuery Plugin etwas für dich: https://www.smartmenus.org/ ?
Also ich habe es jetzt mal so gemacht!
HTML:
<nav id="nav"> <ul id="navigation"> <li><a href="#">2017 »</a> <ul> <li><a href="#">2016</a></li> <li><a href="#">2015</a></li> <li><a href="#">2014</a></li> <li><a href="#">2013</a></li> <li><a href="#">2012</a></li> <li><a href="#">2011</a></li> <li><a href="#">2010</a></li> <li><a href="#">2009</a></li> <li><a href="#">2008</a></li> <li><a href="#">2007</a></li> </ul> </li> </ul> </nav>CSS
#nav {
position: absolute;
width:820px;
height: 200px;
margin-left:-600px;
margin-top: -250px;
padding:10px
}
ul#navigation {
/* margin:0px auto; */
margin-left: 580px;
margin-top: -67px;
position:absolute;
float:left;
border-top:1px solid darkgrey;
border-bottom:1px solid darkgrey;
padding: 0px;
}
ul#navigation li {
display:inline;
font-size:25px;
font-weight:bold;
margin:0;
padding:0;
float:left;
position:relative;
border-top:1px solid darkgrey;
border-bottom:2px solid darkgrey;
}
ul#navigation li a {
padding:10px 30px;
color:#616161;
text-shadow:1px 1px 0px #fff;
text-decoration:none;
display:inline-block;
border-right:1px solid #fff;
border-left:1px solid #C2C2C2;
border-top:1px solid #fff;
background: #dddddd;
-webkit-transition:color 0.2s linear, background 0.2s linear;
-moz-transition:color 0.2s linear, background 0.2s linear;
-o-transition:color 0.2s linear, background 0.2s linear;
transition:color 0.2s linear, background 0.2s linear;
}
ul#navigation li a:hover {
background:#f8f8f8;
color:#282828;
}
ul#navigation li a.first {
border-left: 0 none;
}
ul#navigation li a.last {
border-right: 0 none;
}
ul#navigation li:hover > a {
background:#fff;
}
/* Drop-Down Navigation */
ul#navigation li:hover > ul
{
/*these 2 styles are very important,
being the ones which make the drop-down to appear on hover */
visibility:visible;
opacity:1;
}
ul#navigation ul, ul#navigation ul li ul {
list-style: none;
margin: 0;
padding: 0;
/*the next 2 styles are very important,
being the ones which make the drop-down to stay hidden */
visibility:hidden;
opacity:0;
position: absolute;
z-index: 99999;
width:180px;
background:/*#f8f8f8;*/#dddddd;
box-shadow:1px 1px 3px #ccc;
/* css3 transitions for smooth hover effect */
-webkit-transition:opacity 0.2s linear, visibility 0.2s linear;
-moz-transition:opacity 0.2s linear, visibility 0.2s linear;
-o-transition:opacity 0.2s linear, visibility 0.2s linear;
transition:opacity 0.2s linear, visibility 0.2s linear;
}
ul#navigation ul {
top: 43px;
left: 1px;
}
ul#navigation ul li ul {
top: 0;
left: 181px; /* strong related to width:180px; from above */
}
ul#navigation ul li {
clear:both;
width:100%;
border:0 none;
border-bottom:1px solid #c9c9c9;
}
ul#navigation ul li a {
background:none;
padding:7px 15px;
color:#616161;
text-shadow:1px 1px 0px #fff;
text-decoration:none;
display:inline-block;
border:0 none;
float:left;
clear:both;
width:150px;
}Scheint zu funktionieren. Habe ein "Buttom"-Tutorial gemacht und es einfach angepasst, so wie ich es brauche. Allerdings erscheint mir der Code nicht gerade "optimal"... was würdet ihr verbessern?
Das ist nun keine direkte Antwort auf deine Frage, sorry. Aber,
wenn ich dich richtig verstehe setzt du das HTML innerhalb von Joomla! (in einem Beitrag?) ein.
Das ist eigentlich nicht Sinn und Zweck eines CMS. Ein CMS wie Joomla! verwende ich, wenn ich möchte, dass mir der HTML Code zum Menü dynamisch generiert wird - so das ich über eine Benutzeroberfläche (Backend von Joomla!) Menüpunkte hinzufügen oder löschen kann.
Ich beeinflusse dann mithilfe von Templates, Overrides und/oder jQuery/JavaSript das Aussehen und Verhalten des Menüs.
Wenn ich das Menü selbst statisch erstelle, dann nutze ich kein CMS.