Suche
Teilen
startseite » forum

Dropline Menü

  • 1
  • saphos saphos
    Jar Jar Binks
    0 x
    1 Beiträge
    0 Hilfreiche Beiträge
    18. 08. 2010, 16:15

    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>

    1. page = PAGE
    2. page.config.doctype = xhtml_trans   #ohne diese 3 zeilen geht es nicht
    3. page.config.xhtml_cleaning = all    #
    4. page.config.htmlTag_langKey = de    #
    5. page  {
    6.   typeNum = 0
    7.   stylesheet = dein style.css
    8.   meta.AUTHOR = name
    9.   meta.DESCRIPTION = 
    10.  
    11.   10 = TEMPLATE
    12.   10.template = FILE
    13.   10.template.file = deine vorlage.html
    14.   10.workOnSubpart = DOKUMENT
    15.   10.marks {
    16.  
    17.  
    18.     dein menu-marker = HMENU
    19.     dein menu-marker = directory
    20.     dein menu-marker = id-nr.
    21.     dein menu-marker {
    22.   1 = TMENU
    23.   1 {
    24.          wrap = <div class="dropMenu"><ul>|</ul></div> # wichtig
    25.     expAll = 1
    26.     noBlur = 1
    27.     NO.ATagTitle.field = subtitle//title
    28.     NO.wrapItemAndSub =  <li> | </li>|*| <li> | </li> |*| <li class="last"> | </li>
    29.     IFSUB = 1
    31.       ATagTitle.field = subtitle//title
    32.       wrapItemAndSub =  <li> | </li>|*| <li> | </li> |*| <li class="last"> | </li><br>
    33.       allWrap = | <!--<![endif]-->
    34.       linkWrap = |<!--[if gte IE 7]><!-->
    35.       ATagBeforeWrap = 1
    36.     }
    37.     ACT < .NO
    38.     ACT = 1
    40.   }
    41.   2 = TMENU
    42.   2 {
    43.     wrap = <div ><!--[if lte IE 6]><table><tr><td><![endif]--><ul> | </ul><!--[if lte IE 6]></td></tr></table></a><![endif]--> </div> #wichtig
    44.     expAll = 1
    45.     noBlur = 1
    46.     NO.ATagTitle.field = subtitle//title
    47.     NO.wrapItemAndSub = <li> | </li>
    48.     IFSUB = 1
    50.       wrapItemAndSub = <li> | </li>
    51.       allWrap = | <!--<![endif]-->
    52.       linkWrap = |<!--[if IE 7]><!-->
    53.       ATagBeforeWrap = 1
    54.     }
    55.     }
    56.  
    57.   3 < .2
    58.   4 < .2
    59.  
    60. }
    61.  
    62. page.10.subparts.topmenu < NAVI
    63.   }

    hier die passende css

    1. .dropMenu {
    2. width : 980px;
    3. position : relative;
    4. text-align : center;
    5. font-family : arial, sans-serif;
    6. font-size : 13px;
    7. height : 50px;
    8. background : #f90 url(/fileadmin/images/t-bar.jpg) repeat-x;
    9. }
    10. .dropMenu div {
    11. width : 980px;
    12. position : absolute;
    13. left : -9999px;
    14. text-align : center;
    15. height : 25px;
    16. padding : 10px 0;
    17. z-index : 100;
    18. background : url(/fileadmin/images/trans.gif);
    19. }
    20.  
    21. .dropMenu ul {
    22. padding : 0;
    23. margin : 0;
    24. list-style : none;
    25. }
    26. .dropMenu ul li {
    27. display : inline-block;
    28. background : url(/fileadmin/images/divider.png) no-repeat right center;
    29. line-height : 23px;
    30. }
    31. .dropMenu ul li.last {
    32. background : none;
    33. }
    34. .dropMenu ul li a {
    35. display : inline-block;
    36. line-height : 15px;
    37. text-decoration : none;
    38. color : #903;
    39. padding : 0 15px;
    40. font-weight : bold;
    41. }
    42. .dropMenu ul li a:hover {
    43. white-space : nowrap;
    44. color : #000;
    45. }
    46. .dropMenu ul li:hover > a {
    47. color : #f00;
    48. }
    49. .dropMenu ul li a:hover b {
    50. display : inline-block;
    51. position : relative;
    52. left : -40px;
    53. padding-left : 40px;
    54. padding-right : 40px;
    55. margin-right : -80px;
    56. background : url(../dropline/trans.gif);
    57. cursor : pointer;
    58. }
    59. .dropMenu ul :hover div {
    60. left : 0;
    61. top : 15px;
    62. }

    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

  • ArminB ArminB
    Jedi-Meister
    0 x
    410 Beiträge
    0 Hilfreiche Beiträge
    26. 08. 2010, 18:57

    Ein weiter Ansatz unter http://typo3.intervation.de/snippets/css-menues/the-ultimate-css-only-drop-down-menu.html

    Armin

  • 1
Präsentiert von