Benutzer Diskussion:Sanktusm
Aus Contao Community Documentation
Hallo, ich möchte ein einfaches Mega Dropdownmenue auf CSS Basis diskutieren, dass ich jüngst programmiert habe. Es ist auf Basis von
http://www.visibilityinherit.com/code/mega-drop-down-demo.php
erstellt.
Hier der Code:
<style type="text/css">
- {
margin:0; padding:0; } html, body { height:100%; background:#666; }
- wrap {
min-height:100%; width:905px; margin:-1px auto 0; background:#ccc; border:1px solid #000; border-bottom:0; }
- html #wrap {
height:100%; } /* ---------- Mega Drop Down --------- */
- mega {
list-style:none; font-weight:bold; height:2em; margin:60px -1px 0 0; }
- mega li {
background:#999; border:1px solid #000; margin-left:-1px; float:left; width:150px; text-align:center; position:relative; }
- mega li:hover {
background:#eee;
border-bottom:0; /* border-bottom:0; and padding-bottom:1px; keepspadding:7px 0 1px 0; margin-top:-7px; z-index:1; /* shadow above adjacent li */ }
- mega a {
color:#000; outline:0; text-decoration:none; display:block; line-height:2em; } /* ----------- Hide/Show Div ---------- */
- mega div {
position:absolute; left:-999em; margin-top:1px; width:350px; padding:0 10px 10px; border:1px solid #000; border-top:0; font-weight:normal; text-align:left; background:#eee; }
- mega li:hover div {
left:-1px;top:auto; }
- mega li.dif:hover div {
left:-221px; } /* --------- Within Div Styles --------- */
- mega div h2 {
background:#999; font-size:1em; padding:0 10px; margin:10px 0 5px 0; clear:both; float:left; width:330px; position:relative; /* makes above drop shadow */ }
- mega div p {
float:left; width:106px; padding-left:10px; position:relative; /* makes above drop shadow */ }
- mega div p a {
text-decoration:underline; float:left; clear:left; width:100%; /* For IE6/7 */ line-height:1.4; }
- mega div a:hover, #mega div a:focus, #mega div a:active {
text-decoration:none; } /* ---------- Drop Shadow ---------- */
- mega div .s1, #mega div .s2, #mega div .s3 {
position:absolute; width:100%;height:100%; }
- mega div .s1 {
background:url(../images/rightcorner.png) 100% 0 no-repeat; top:1px;right:-9px; }
- mega div .s2 {
background:url(../images/leftcorner.png) 0 100% no-repeat; bottom:-9px;left:1px; }
- mega div .s3 {
background:url(../images/shadow.png) 100% 100%; top:9px;right:-9px; }
- mega li:hover .s4 {
background:url(images/li-shadow.png) 100% 0 repeat-y; position:absolute; top:0;right:-9px; height:100%; padding:0 8px 0 0; }
- html #mega li:hover .s4 {
background:none; }
- mega li:hover .dif-s4 {
padding-bottom:9px } </style>
Hier das entsprechende Template: <?php if($this->level == "level_1") {
echo "- ";
}
foreach ($this->items as $item) {
if($this->level == "level_1"){
echo "";
if ($item['isActive'])echo "
$itemslevel_2++;
}
if($itemslevel_2)
echo ""; if ($this->level == "level_3" AND $itemslevel_3 == 0) echo "
";
?>
<a class="mainlevel_topbar" href="<?php echo $item['href']; ?>"><?php echo $item['link']; ?></a>
<?php echo $item['subitems']; ?>
<?php
if($this->level == "level_3" AND $itemslevel_3 >= 2)
echo "
";
if($this->level == "level_3") {
echo "";
$itemslevel_3++;
}
if($item['subpages'] == $itemslevel_2 AND $this -> level == "level_2") {
echo "}
}
if($this->level == "level_1")
echo "
