Page 1 of 1
drop down menu
Posted: Sun 23. Feb 2014, 15:37
by Batista
hallo,
so nach langer zeit, arbeite ich wiedermal mit phpwmcs.
meine frage, ich brauche einen horizontalen dropdown menu, habe
http://forum.phpwcms.org/viewtopic.php?t=16080 gefunden, ist es immernoch aktuell oder gibt es eine neuere/einfachere lösung?
Re: drop down menu
Posted: Sun 23. Feb 2014, 15:48
by Uwe367
Das sollte funktionieren bzw. ist noch aktuell wenn du eine reine CSS Navi bauen willst. Das einzige, was dir passieren könnte, ist daß das Script rt_nav_horiz_drop_down.php ein paar Notices ausgibt.
Re: drop down menu
Posted: Sun 23. Feb 2014, 15:49
by Batista
Danke dir, gibt es sonst eine einfachere lösung?
Re: drop down menu
Posted: Sun 23. Feb 2014, 15:50
by Uwe367
Als Drop-down Menü fällt mir derzeit keine einfachere Lösung ein.
Re: drop down menu
Posted: Sun 23. Feb 2014, 16:36
by Batista
cool vielen dank, schönen tag noch.
Re: drop down menu
Posted: Thu 27. Feb 2014, 10:50
by kmstario
Hallöchen,
ich bastel immer gern an dem Navithema rum und seit, glaube Dezember, steht in der
Wiki (ganz unten) folgende Variante ohne zusätzliches Script:
Code: Select all
{NAV_LIST_UL:P,0,,current|menu responsive-menu,current}
was das hier in etwa ausgibt:
Code: Select all
<ul class="menu responsive-menu">
<li class="sub_parent current"><a href="index.php?index" title="Home">Home</a></li>
<li class="sub_no sub_first"><a href="index.php?kontakt" title="Kontakt">Kontakt</a></li>
<li class="sub_no sub_last"><a href="index.php?impressum" title="Impressum">Impressum</a></li>
</ul>
Dann noch etwas CSS dazu, in der Form etwa:
Code: Select all
.menu {
list-style: none;
*zoom: 1;
margin:0;
}
.menu:before,
.menu:after {
content: " ";
display: table;
}
.menu:after {
clear: both;
}
.menu ul {
list-style: none;
width: 100%;
}
/* Level 1
********************************************************/
.menu a {
padding: 8px 3%;
margin:80px 0 0 0;
color:#b09d96;
display:block;
}
.menu li a:hover,
.menu li a:active {
text-decoration:none;
color: #666
}
.menu li {
position: relative;
width:19%; /* Breite Menuepunkte */
min-width:110px;
}
.menu > li {
float: left;
}
.menu > li > .parent {
background-image: url("../../picture/downArrow.png");
background-repeat: no-repeat;
background-position: 7% 58%;
}
.menu > li > a {
display: block;
}
/* Level 2
**********************************************************/
.menu li ul {
width:230px; /* Groesse bzw breite Submenues*/
background: #E6E6EB;
position: absolute;
left: -9999px;
z-index:50000;
text-align:left;
}
.menu > li.hover > ul {
left: 0;
}
.menu li li.hover ul {
left: 160px;
top: 5px;
}
.menu > li li > .parent {
background-image: url("../../picture/openArrow.png");
background-repeat: no-repeat;
background-position: 95%;
}
.menu li li {
z-index:100;
border-bottom: 1px solid #ccc;
width:100%;
}
.menu li li:last-child {
border-bottom:0 !important
}
.menu li li a {
display: block;
color: #623C2E;
text-transform:none;
position: relative;
margin:0 !important;
padding: 8px 10px;
font-size:14px;
line-height:1.5em;
}
.menu li li li a {
display: block;
background:#efefef;
z-index:100;
line-height:1.3em;
border-bottom: 1px solid #ccc;
}
Damit arbeite ich recht erfolgreich.
Funktioniert auch als Responsive, wenn entsprechend eingerichtet. So sind zusätzliche Skripte nicht mehr erfolgreich.
Hoffe das hilft vieleicht weiter
