Druckbare Version
Servus,
ich habe ein problem. Ich möchte ein menu bauen, wo ich nur in der ersten Ebene (.level_1) die UL mit einer ID versehen will
<ul id="nav" class="level_1>
Sobald ich das aber in der nav_default ändere, wird das vererbt an das .level_2, wo die ganzen styles wieder angewendet werden.
Man müsste also die Navi auseinanderpflücken, oder hat jemand eine andere Idee?
Danke
Mach einfach ne if Abfrage ob du in die Klasse level_1 vorliegt. Wenn ja, dann ID rein.
Hier kannst dir inspiration holen: http://de.contaowiki.org/ModulNaviga....C3.BC_braucht
Viele Grüße
Hi,
ok ich versuch mal mein Glück :)
Danke schonmal
Ein Traum, geht Super. Danke Dir!!
Hallo.
Ich hoffe ich bin im richtigen Thema :rolleyes:
Es gibt ein css3 Menügenerator
http://css3menu.com
den ich recht ansprechend finde.
Das Tool generiert nach wenigen Klicks ein komplettes Dropdown-Menü samt HTML und dazugehörigen CSS.
Nun würde ich gern das CSS für das Navigationstemplate einsetzen.
Das Tool vergibt aber IDs und Klassen auf die Tags, die vom nav_default so nicht ausgeliefert werden.
Ist es möglich das nav_default so anzupassen, dass die CSS von css3menu greift?
Ich würde sonst mal ein Menü bauen und posten, damit Ihr sehen könnt wie css3menu den HTML aufsetzt.
Greetz :D
Stell doch mal das von css3menu erzeugte HTML und CSS hier rein, dann fällt es sicher leichter, das zu beurteilen.
Hallo.
Ich habe mal ein kleines horizontales DropDown mit dem Tool erzeugt. Bis hinunter in die 4. Ebene. Zum Teil ist da auch inlineCss bei. Schön wiederum ist aber auch, dass es responsiv ist.
Als erstes der HTML Code, wobei dort eigentlich nur der body-Tag entscheident sein müsste. So jedenfalls sollte das Contao Nav Modul den Code erzeugen, damit die CSS einfach und schnell eingebaut werden kann.:
Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>css3menu.com</title>
<!-- Start css3menu.com HEAD section -->
<link rel="stylesheet" href="Mainmenu_files/css3menu1/style.css" type="text/css" /><style type="text/css">._css3m{display:none}</style>
<!-- End css3menu.com HEAD section -->
</head>
<body style="background-color:#EBEBEB">
<!-- Start css3menu.com BODY section -->
<ul id="css3menu1" class="topmenu">
<input type="checkbox" id="css3menu-switcher" class="switchbox"><label onclick="" class="switch" for="css3menu-switcher"></label> <li class="topmenu"><a href="#" style="height:18px;line-height:18px;">Item 0</a></li>
<li class="topmenu"><a href="#" style="height:18px;line-height:18px;"><span>Item 1</span></a>
<ul>
<li><a href="#">Item 1 0</a></li>
<li><a href="#">Item 1 1</a></li>
<li><a href="#"><span>Item 1 2</span></a>
<ul>
<li><a href="#"><span>Item 1 2 0</span></a>
<ul>
<li><a href="#">Item 1 2 0 0</a></li>
</ul></li>
<li><a href="#">Item 1 2 1</a></li>
<li><a href="#">Item 1 2 2</a></li>
</ul></li>
</ul></li>
<li class="topmenu"><a href="#" style="height:18px;line-height:18px;">Item 2</a></li>
<li class="topmenu"><a href="#" style="height:18px;line-height:18px;">Item 3</a></li>
<li class="topmenu"><a href="#" style="height:18px;line-height:18px;">Item 4</a></li>
</ul>
<!-- End css3menu.com BODY section -->
</body>
</html>
Und hier die CSS. Vorerst ohne Transition-Effekte. :
Das Tool erzeugt 1. den HTML-Code und 2. einen Ordner mit der CSS-Datei und den Bilddateien.Code:ul#css3menu1,ul#css3menu1 ul{
margin:0;list-style:none;padding:0;background-color:#403a47;border-width:1px;border-style:solid;border-color:#454545;-moz-border-radius:11px;-webkit-border-radius:11px;border-radius:11px;}
ul#css3menu1 ul{
display:none;position:absolute;left:0;top:103%;-moz-box-shadow:0px 0px 2px #999999;-webkit-box-shadow:0px 0px 2px #999999;box-shadow:0px 0px 2px #999999;background-color:#606060;border-width:0px;border-radius:7px;-moz-border-radius:7px;-webkit-border-radius:7px;border-color:#606060;padding:0 6px 6px;}
ul#css3menu1 li:hover>*{
display:block;}
ul#css3menu1 li{
position:relative;display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu1 li:hover{
z-index:1;}
ul#css3menu1 ul ul{
position:absolute;left:100%;top:1px;}
ul#css3menu1{
font-size:0;z-index:999;position:relative;display:inline-block;zoom:1;padding:5px 5px 5px 0;background-image:url("mainbk.png");
*display:inline;}
* html ul#css3menu1 li a{
display:inline-block;}
ul#css3menu1>li{
margin:0 0 0 5px;}
ul#css3menu1 ul>li{
margin:5px 0 0;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{
outline-style:none;}
ul#css3menu1 a{
display:block;vertical-align:middle;text-align:left;text-decoration:none;font:13px Trebuchet MS,sans-serif;color:#ffffff;text-shadow:#999999 0 1px 1px;cursor:pointer;padding:8px 18px;background-color:;background-repeat:repeat;border-width:0px;border-style:none;border-color:;}
ul#css3menu1 ul li{
float:none;margin:6px 0 0;}
ul#css3menu1 ul a{
text-align:left;padding:4px;background-color:#606060;background-image:none;border-width:0 0 0 0;border-style:solid;border-color:#606060;border-radius:7px;-moz-border-radius:7px;-webkit-border-radius:7px;font:13px Trebuchet MS,sans-serif;color:#ffffff;text-decoration:none;text-shadow:#ffffff 0 0 0;}
ul#css3menu1 li:hover>a,ul#css3menu1 li a.pressed{
border-style:none;color:#ffffff;text-shadow:#999999 0 0px 0px;text-decoration:none;}
ul#css3menu1 span{
display:block;overflow:visible;background-image:url("arrowmain.png");background-position:right center;background-repeat:no-repeat;padding-right:19px;}
ul#css3menu1 ul span{
background-image:url("arrowsub.png");padding-right:19px;}
ul#css3menu1 > label.switch{
display:none;cursor:pointer;width:25px;height:20px;padding:8px 18px;}
ul#css3menu1 > label.switch:before{
content:"";position:absolute;display:block;height:4px;width:25px;border-radius:4px;background:#ffffff;-moz-box-shadow:0 8px #ffffff, 0 16px #ffffff;-webkit-box-shadow:0 8px #ffffff, 0 16px #ffffff;box-shadow:0 8px #ffffff, 0 16px #ffffff;}
ul#css3menu1 > label.switch:hover:before{
background:#ffffff;-moz-box-shadow:0 8px #ffffff, 0 16px #ffffff;-webkit-box-shadow:0 8px #ffffff, 0 16px #ffffff;box-shadow:0 8px #ffffff, 0 16px #ffffff;}
ul#css3menu1 > .switchbox{
display:none;}
ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li a.pressed{
background-color:#3f3f3f;background-image:none;border-style:solid;border-color:#606060;color:#ffffff;text-decoration:none;text-shadow:#ffffff 0 0 0;}
ul#css3menu1 li.topmenu>a{
background-color:transparent;border-radius:7px;-moz-border-radius:7px;-webkit-border-radius:7px;}
ul#css3menu1 li.topmenu:hover>a,ul#css3menu1 li.topmenu a.pressed{
background-color:#606060;}
@media screen and (max-width: 768px) {
ul#css3menu1 > li {
position: initial;}
ul#css3menu1 ul .submenu,ul#css3menu1 li > ul {
left: 0; right:auto; top: 100%;}
ul#css3menu1 .submenu,ul#css3menu1 ul,ul#css3menu1 .column {
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;padding-right: 0;width: 100% !important;}
}
@media screen and (max-width: 441px) {
ul#css3menu1 {
width: 100%;}
ul#css3menu1 > li {
display: none !important; position: relative; width: 100% !important;}
ul#css3menu1 > label.switch,ul#css3menu1 .switchbox:checked ~ li {
display: block !important;}
}
Anbei habe ich das ganze mal als ZIP gehängt.
Greetz
Futzie