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. :
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;}
}
Das Tool erzeugt 1. den HTML-Code und 2. einen Ordner mit der CSS-Datei und den Bilddateien.
Anbei habe ich das ganze mal als ZIP gehängt.
Greetz
Futzie
nav_default anpassen mit #ID oberste Ebende!
Zitieren
Lesezeichen