Anzeige

Horizontales Tab Menü mit Horizontalem unter menü

Horizontales Tab Menü mit Horizontalem unter menü | PSD-Tutorials.de

Erstellt von pcmaster, 27.09.2008.

  1. pcmaster

    pcmaster Guest

    Horizontales Tab Menü mit Horizontalem unter menü
    Hallo,

    ich habe da ein Problem:
    Und zwar will ich so ein menü machen wie http://www.tecchannel.de oder
    hier.
    Bei der zweiten Seite funzt zwar das Beispiel auf der Seite, wenn ich es aber in eine lokale HTML Datei kopiere tut sich nichts!
    Kann mir jemand helfen?

    Grüße,
    pcmaster
     
    #1      
  2. stb_87

    stb_87 Web-Sheriff - ohne Bild

    Dabei seit:
    13.05.2007
    Beiträge:
    1.895
    Geschlecht:
    männlich
    Software:
    dies & das
    Horizontales Tab Menü mit Horizontalem unter menü
    AW: Horizontales Tab Menü mit Horizontalem unter menü

    Wie sieht denn dein Quelltext aus???
     
    #2      
  3. pcmaster

    pcmaster Guest

    Horizontales Tab Menü mit Horizontalem unter menü
    AW: Horizontales Tab Menü mit Horizontalem unter menü

    So:

    HTML:
    1.  
    2.  
    3.  
    4. /* ================================================================
    5. This copyright notice must be untouched at all times.
    6.  
    7. The original version of this stylesheet and the associated (x)html
    8. is available at http://www.cssplay.co.uk/menus/doors_drop_line_three.html
    9. Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
    10. This stylesheet and the associated (x)html may be modified in any
    11. way to fit your requirements.
    12. =================================================================== */
    13. /* for this demo only */
    14. #nav {margin:20px 0 80px 0;}
    15.  
    16. /* the styling */
    17. #nav {float:left; width:750px; height:auto; background:#fff url("dropline/bottom_line.gif") repeat-x bottom; position:relative;}
    18.  
    19. #nav .select, #nav .current {margin:0; padding:0; list-style:none; display:block;}
    20.  
    21. #nav li {display:inline; margin:0; padding:0;height:auto;}
    22.  
    23. #nav .select a,
    24. #nav .current a {display:block; height:21px; float:left; background: url("dropline/left_blue.gif") no-repeat left top; padding:0 0 0 3px; border-bottom:1px solid #000; text-decoration:none; font-size:10px; line-height:20px; white-space:nowrap; margin-left:2px;}
    25. * html #nav .select a, * html #nav .current a {width:1px;}
    26.  
    27. #nav .select a b,
    28. #nav .current a b {height:100%; display:block; background:url("dropline/right_blue.gif") no-repeat right top; padding:0 6px 0 3px; color:#000;}
    29.  
    30. #nav .select a:hover,
    31. #nav .select li:hover a {background-position:0 -75px; border-color:#046; cursor:pointer;}
    32.  
    33. #nav .select a:hover b,
    34. #nav .select li:hover a b {background-position:100% -75px; border-color:#046; color:#fff;}
    35.  
    36. #nav .sub {display:none;}
    37.  
    38. /* for IE5.5 and IE6 only */
    39. #nav table {position:absolute; border-collapse:collapse; left:0; top:0; font-size:11px;}
    40.  
    41. #nav .current a {background-position:0 -75px; border-color:#046;}
    42. #nav .current a b {background-position:100% -75px; color:#ff6;}
    43.  
    44.  
    45. #nav .sub li a:hover,
    46. #nav .select a:hover .sub li a:hover,
    47. #nav .select li:hover .sub li a:hover {background:#005984 url(dropline/sub_sep.gif) top right no-repeat; color:#fff; text-decoration:underline;}
    48.  
    49. #nav .sub_active .current_sub a,
    50. #nav .sub_active a:hover {background:#005984 url(dropline/sub_sep.gif) top right no-repeat; color:#ff6; text-decoration:underline;}
    51.  
    52. #nav .select li a:hover .sub,
    53. #nav .select li:hover .sub {display:block; position:absolute; width:750px; top:21px; left:0; background:#005984; margin-top:1px; padding:0; z-index:100; border-bottom:20px solid #fff;}
    54.  
    55. #nav .sub, #nav .sub_active {margin:0; padding:0; list-style:none;}
    56. #nav .sub_active {display:block; position:absolute; width:750px; top:21px; left:0; background:#005984; margin-top:1px; padding:0; z-index:10; color:#000; border-bottom:20px solid #fff;}
    57. * html #nav .sub_active, * html #nav .select a:hover .sub {z-index:-1; margin-top:0; margin-t\op:1px;}
    58.  
    59. #nav .sub_active a {height:25px; float:left; text-decoration:none; line-height:24px; white-space:nowrap; font-weight:normal;}
    60. #nav .sub_active a,
    61. #nav .select a:hover .sub li a,
    62. #nav .select li:hover .sub li a {display:inline; background:#005984 url(dropline/sub_sep.gif) top right no-repeat; padding:0 10px; margin:0; font-size:10px; width:auto; white-space:nowrap; font-weight:normal; border:0; color:#fff; height:25px; line-height:24px; }
    63. </head>
    64.  
    65. <div id="nav">
    66.  
    67. <ul class="select"><li><a href="javascript: ;"><b>January</b>
    68. <!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub"><li><a href="doors_drop_line_three.html?current=one&amp;sub=a">Fish</a></li>
    69. <li><a href="doors_drop_line_three.html?current=one&amp;sub=b">Chips</a></li>
    70. <li><a href="doors_drop_line_three.html?current=one&amp;sub=c">Bacon</a></li>
    71. <li><a href="doors_drop_line_three.html?current=one&amp;sub=d">Eggs</a></li>
    72. <li><a href="doors_drop_line_three.html?current=one&amp;sub=e">Tomato</a></li>
    73. </ul>
    74. <!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>
    75.  
    76.  
    77.  
    78. <ul class="select"><li><a href="doors_drop_line_three.html?current=two&amp;sub=none"><b>February</b>
    79. <!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">
    80. <li><a href="doors_drop_line_three.html?current=two&amp;sub=a">Sausages</a></li>
    81. <li><a href="doors_drop_line_three.html?current=two&amp;sub=b">Fried Bread</a></li>
    82. <li><a href="doors_drop_line_three.html?current=two&amp;sub=c">Fillet steak</a></li>
    83. <li><a href="doors_drop_line_three.html?current=two&amp;sub=d">Mushrooms</a></li>
    84. </ul>
    85. <!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>
    86.  
    87.  
    88. <ul class="select"><li><a href="doors_drop_line_three.html?current=three&amp;sub=none"><b>March</b>
    89. <!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub"><li><a href="doors_drop_line_three.html?current=three&amp;sub=a">Lager</a></li>
    90. <li><a href="doors_drop_line_three.html?current=three&amp;sub=b">Beer</a></li>
    91. <li><a href="doors_drop_line_three.html?current=three&amp;sub=c">Red wine</a></li>
    92. <li><a href="doors_drop_line_three.html?current=three&amp;sub=d">Crisps</a></li>
    93. <li><a href="doors_drop_line_three.html?current=three&amp;sub=e">Brandy</a></li>
    94. </ul>
    95. <!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>
    96.  
    97.  
    98. <ul class="select"><li><a href="doors_drop_line_three.html?current=four&amp;sub=none"><b>April</b>
    99.  
    100. <!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub"><li><a href="doors_drop_line_three.html?current=four&amp;sub=a">Tea</a></li>
    101. <li><a href="doors_drop_line_three.html?current=four&amp;sub=b">Coffee</a></li>
    102. <li><a href="doors_drop_line_three.html?current=four&amp;sub=c">Milk</a></li>
    103. <li><a href="doors_drop_line_three.html?current=four&amp;sub=d">Squash</a></li>
    104. <li><a href="doors_drop_line_three.html?current=four&amp;sub=e">Lemonade</a></li>
    105. </ul>
    106. <!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>
    107.  
    108. <ul class="select"><li><a href="doors_drop_line_three.html?current=five&amp;sub=none"><b>May</b>
    109. <!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub"><li><a href="doors_drop_line_three.html?current=five&amp;sub=a">Crab</a></li>
    110.  
    111. <li><a href="doors_drop_line_three.html?current=five&amp;sub=b">Shrimps</a></li>
    112. <li><a href="doors_drop_line_three.html?current=five&amp;sub=c">Lobster</a></li>
    113. <li><a href="doors_drop_line_three.html?current=five&amp;sub=d">Prawns</a></li>
    114. <li><a href="doors_drop_line_three.html?current=five&amp;sub=e">Salmon</a></li>
    115. </ul>
    116. <!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>
    117.  
    118.  
    119. <ul class="current"><li><a href="doors_drop_line_three.html?current=six&amp;sub=none"><b>June</b>
    120. </a></li></ul><ul class="sub_active"><li><a href="doors_drop_line_three.html?current=six&amp;sub=a">Jam</a></li>
    121. <li><a href="doors_drop_line_three.html?current=six&amp;sub=b">Lemon Curd</a></li>
    122.  
    123. <li><a href="doors_drop_line_three.html?current=six&amp;sub=c">Marmalade</a></li>
    124. <li><a href="doors_drop_line_three.html?current=six&amp;sub=d">Marmite</a></li>
    125. <li><a href="doors_drop_line_three.html?current=six&amp;sub=e">Bovril</a></li>
    126. </ul>
    127.  
    128.  
    129.  
    130. <ul class="select"><li><a href="doors_drop_line_three.html?current=seven&amp;sub=none"><b>July</b>
    131. <!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub"><li><a href="doors_drop_line_three.html?current=seven&amp;sub=a">Lamb</a></li>
    132. <li><a href="doors_drop_line_three.html?current=seven&amp;sub=b">Chicken</a></li>
    133. <li><a href="doors_drop_line_three.html?current=seven&amp;sub=c">Pork</a></li>
    134.  
    135. <li><a href="doors_drop_line_three.html?current=seven&amp;sub=d">Beef</a></li>
    136. <li><a href="doors_drop_line_three.html?current=seven&amp;sub=e">Cheese</a></li>
    137. </ul>
    138. <!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>
    139.  
    140.  
    141. <ul class="select"><li><a href="doors_drop_line_three.html?current=eight&amp;sub=none"><b>August</b>
    142. <!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub"><li><a href="doors_drop_line_three.html?current=eight&amp;sub=a">Beach</a></li>
    143. <li><a href="doors_drop_line_three.html?current=eight&amp;sub=b">Country walk</a></li>
    144. <li><a href="doors_drop_line_three.html?current=eight&amp;sub=c">Photography</a></li>
    145. <li><a href="doors_drop_line_three.html?current=eight&amp;sub=d">Window shopping</a></li>
    146.  
    147. <li><a href="doors_drop_line_three.html?current=eight&amp;sub=e">Gardening</a></li>
    148. </ul>
    149. <!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>
    150.  
    151.  
    152. <ul class="select"><li><a href="doors_drop_line_three.html?current=nine&amp;sub=none"><b>September</b>
    153. <!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub"><li><a href="doors_drop_line_three.html?current=nine&amp;sub=a">Tulips</a></li>
    154. <li><a href="doors_drop_line_three.html?current=nine&amp;sub=b">Sunflower</a></li>
    155. <li><a href="doors_drop_line_three.html?current=nine&amp;sub=c">Cyclamen</a></li>
    156. <li><a href="doors_drop_line_three.html?current=nine&amp;sub=d">Dahlia</a></li>
    157. <li><a href="doors_drop_line_three.html?current=nine&amp;sub=e">Gladiolus</a></li>
    158.  
    159. </ul>
    160. <!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>
    161.  
    162.  
    163. <ul class="select"><li><a href="doors_drop_line_three.html?current=ten&amp;sub=none"><b>October</b>
    164. <!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub"><li><a href="doors_drop_line_three.html?current=ten&amp;sub=a">Cup</a></li>
    165. <li><a href="doors_drop_line_three.html?current=ten&amp;sub=b">Saucer</a></li>
    166. <li><a href="doors_drop_line_three.html?current=ten&amp;sub=c">Plate</a></li>
    167. <li><a href="doors_drop_line_three.html?current=ten&amp;sub=d">Fruit bowl</a></li>
    168. <li><a href="doors_drop_line_three.html?current=ten&amp;sub=e">Egg cup</a></li>
    169. </ul>
    170.  
    171. <!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>
    172.  
    173. <ul class="select"><li><a href="doors_drop_line_three.html?current=eleven&amp;sub=none"><b>November</b>
    174. <!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub"><li><a href="doors_drop_line_three.html?current=eleven&amp;sub=a">Fireside</a></li>
    175. <li><a href="doors_drop_line_three.html?current=eleven&amp;sub=b">Gloves</a></li>
    176. <li><a href="doors_drop_line_three.html?current=eleven&amp;sub=c">Scarves</a></li>
    177. <li><a href="doors_drop_line_three.html?current=eleven&amp;sub=d">Long coat</a></li>
    178. <li><a href="doors_drop_line_three.html?current=eleven&amp;sub=e">Boots</a></li>
    179. </ul>
    180. <!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>
    181.  
    182. <ul class="select"><li><a href="doors_drop_line_three.html?current=twelve&amp;sub=none"><b>December</b>
    183. <!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub"><li><a href="doors_drop_line_three.html?current=twelve&amp;sub=a">Winter</a></li>
    184. <li><a href="doors_drop_line_three.html?current=twelve&amp;sub=b">Skiing</a></li>
    185. <li><a href="doors_drop_line_three.html?current=twelve&amp;sub=c">Snowman</a></li>
    186. <li><a href="doors_drop_line_three.html?current=twelve&amp;sub=d">Christmas</a></li>
    187. <li><a href="doors_drop_line_three.html?current=twelve&amp;sub=e">*****ers</a></li>
    188. <li><a href="doors_drop_line_three.html?current=twelve&amp;sub=f">..and so on</a></li>
    189. <li><a href="doors_drop_line_three.html?current=twelve&amp;sub=g">..'til you get to the end</a></li>
    190. <li><a href="doors_drop_line_three.html?current=twelve&amp;sub=h"> A Happy New Year to all!</a></li>
    191.  
    192. </ul>
    193. <!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>
    194.  
    195. </div>
    196.  
    197. </body>
    198. </html>
    199.  
    200.  
     
    #3      
  4. kskoberharz

    kskoberharz Helper

    Dabei seit:
    29.04.2006
    Beiträge:
    286
    Geschlecht:
    männlich
    Horizontales Tab Menü mit Horizontalem unter menü
    AW: Horizontales Tab Menü mit Horizontalem unter menü

    Also bei mir geht es!
     
    #4      
  5. stb_87

    stb_87 Web-Sheriff - ohne Bild

    Dabei seit:
    13.05.2007
    Beiträge:
    1.895
    Geschlecht:
    männlich
    Software:
    dies & das
    Horizontales Tab Menü mit Horizontalem unter menü
    AW: Horizontales Tab Menü mit Horizontalem unter menü

    Wenn du den Quelltext 1 zu 1 von der Website kopiert hast, dann sollte es keine Probleme geben! In welchem Browser/Version hast du es getestet?
     
    #5      
  6. pcmaster

    pcmaster Guest

    Horizontales Tab Menü mit Horizontalem unter menü
    AW: Horizontales Tab Menü mit Horizontalem unter menü

    Ich verwende Firefox 3.0.3.
     
    #6      
  7. stb_87

    stb_87 Web-Sheriff - ohne Bild

    Dabei seit:
    13.05.2007
    Beiträge:
    1.895
    Geschlecht:
    männlich
    Software:
    dies & das
    Horizontales Tab Menü mit Horizontalem unter menü
    AW: Horizontales Tab Menü mit Horizontalem unter menü

    Dann überprüf noch mal alles.

    Kann mir nicht vorstellen, dass das nicht mehr geht, obwohl du es 1:1 kopiert hast.

    Hast du mal den Cache geleert bzw die Seite mit Strg + F5 neu geladen?
     
    #7      
  8. pcmaster

    pcmaster Guest

    Horizontales Tab Menü mit Horizontalem unter menü
    AW: Horizontales Tab Menü mit Horizontalem unter menü

    Thema kann geschlossen werden.
    Habe das Script so modifiziert, dass es funktioniert.:rolleyes:

    Grüße,
    pcmaster
     
    #8      
  9. stb_87

    stb_87 Web-Sheriff - ohne Bild

    Dabei seit:
    13.05.2007
    Beiträge:
    1.895
    Geschlecht:
    männlich
    Software:
    dies & das
    Horizontales Tab Menü mit Horizontalem unter menü
    AW: Horizontales Tab Menü mit Horizontalem unter menü

    Und wo war da jetzt das Problem?
     
    #9      
  10. pcmaster

    pcmaster Guest

    Horizontales Tab Menü mit Horizontalem unter menü
    AW: Horizontales Tab Menü mit Horizontalem unter menü

    Ich hatte vergessen ein PHP Code einzufügen.
     
    #10      
x
×
×
teststefan