Zum Inhalt springen

Dropline Menü

Erstellt am 17. August 2010 · 2 Antworten · letzte Antwort am 26. August 2010

Tags: Frage

saphos ·

Hallo,

ich hab folgendes menu bei mir realisiert, deinem recht ähnlich:

http://www.cssplay.co.uk/menus/css3-dropline-overrun.html
'(unterstütz nur 2 zeilen)'(lizenz-bestimmungen-beachten!!)

ich hab das bei jweiland.net (vielen Dank an dieser stelle) gefunden, erzeugt ein text-listing das so aussieht:
(abhängig von der menu-struktur), dürfte aber für viele drop-menüs passen

<div class="dropMenu">
<ul>
<li><a>....</a></li>
<li><a>....</a></li>
<li><a>....</a>
<div><ul>
<li>....</li>
<li>....</li>
<li>....</li></ul></div></li>
<li><a>....</a></li>
<li><a>....</a></li>
</ul>
<div>

page = PAGE
page.config.doctype = xhtml_trans   #ohne diese 3 zeilen geht es nicht
page.config.xhtml_cleaning = all    #
page.config.htmlTag_langKey = de    #
page  {
  typeNum = 0
  stylesheet = dein style.css
  meta.AUTHOR = name
  meta.DESCRIPTION = 
  
  10 = TEMPLATE
  10.template = FILE
  10.template.file = deine vorlage.html
  10.workOnSubpart = DOKUMENT
  10.marks {

        
    dein menu-marker = HMENU
    dein menu-marker = directory
    dein menu-marker = id-nr.
    dein menu-marker {
  1 = TMENU
  1 {
         wrap = <div class="dropMenu"><ul>|</ul></div> # wichtig
    expAll = 1
    noBlur = 1
    NO.ATagTitle.field = subtitle//title
    NO.wrapItemAndSub =  <li> | </li>|*| <li> | </li> |*| <li class="last"> | </li>
    IFSUB = 1
    IFSUB {
      ATagTitle.field = subtitle//title
      wrapItemAndSub =  <li> | </li>|*| <li> | </li> |*| <li class="last"> | </li><br>
      allWrap = | <!--<![endif]-->
      linkWrap = |<!--[if gte IE 7]><!-->
      ATagBeforeWrap = 1
    }
    ACT < .NO
    ACT = 1
    ACTIFSUB < .IFSUB
  }
  2 = TMENU
  2 {
    wrap = <div ><!--[if lte IE 6]><table><tr><td><![endif]--><ul> | </ul><!--[if lte IE 6]></td></tr></table></a><![endif]--> </div> #wichtig
    expAll = 1
    noBlur = 1
    NO.ATagTitle.field = subtitle//title
    NO.wrapItemAndSub = <li> | </li>
    IFSUB = 1
    IFSUB {
      wrapItemAndSub = <li> | </li>
      allWrap = | <!--<![endif]-->
      linkWrap = |<!--[if IE 7]><!-->
      ATagBeforeWrap = 1
    }
    }

  3 < .2
  4 < .2
 
}

page.10.subparts.topmenu < NAVI
  }

hier die passende css

.dropMenu {
width : 980px;
position : relative;
text-align : center;
font-family : arial, sans-serif;
font-size : 13px;
height : 50px;
background : #f90 url(/fileadmin/images/t-bar.jpg) repeat-x;
}
.dropMenu div {
width : 980px;
position : absolute;
left : -9999px;
text-align : center;
height : 25px;
padding : 10px 0;
z-index : 100;
background : url(/fileadmin/images/trans.gif);
}

.dropMenu ul {
padding : 0;
margin : 0;
list-style : none;
}
.dropMenu ul li {
display : inline-block;
background : url(/fileadmin/images/divider.png) no-repeat right center;
line-height : 23px;
}
.dropMenu ul li.last {
background : none;
}
.dropMenu ul li a {
display : inline-block;
line-height : 15px;
text-decoration : none;
color : #903;
padding : 0 15px;
font-weight : bold;
}
.dropMenu ul li a:hover {
white-space : nowrap;
color : #000;
}
.dropMenu ul li:hover > a {
color : #f00;
}
.dropMenu ul li a:hover b {
display : inline-block;
position : relative;
left : -40px;
padding-left : 40px;
padding-right : 40px;
margin-right : -80px;
background : url(../dropline/trans.gif);
cursor : pointer;
}
.dropMenu ul :hover div {
left : 0;
top : 15px;
}

wichtig fürs menü sind die div in den wrap-zeilen,
das genannte css-menu von stu nichols ist nicht FREE, aber gegen eine kleine spende bekommt man es komplett mit css&html per mail

hoffe das hilft!
gruß ron