Hallo, ich habe bisher folgendes: HTML:
Dazu erstelle ich bei "subnav" ein Untermenü, dass nach unten ausklappt über: JQUERY:
CSS
Ist es nun möglich, neben der "subnav" eine "subnav2" zu erstellen, die dann rechts neben der "subnav" erscheint mit einträgen? In HTML:
Was müsste ich dazu an meinem jquery Code verändern verstehe das nicht ganz...
Code:
[LIST]
[*][URL="http://www.html.de/"]1[/URL]
[*][URL="http://www.html.de/"]2[/URL]
[*] [URL="http://www.html.de/"]3[/URL]
[LIST]
[*][URL="http://www.html.de/"]4[/URL]
[*][URL="http://www.html.de/"]5[/URL]
[*][URL="http://www.html.de/"]6[/URL]
[*][URL="http://www.html.de/"]7[/URL]
[*][URL="http://www.html.de/"]8[/URL]
[/LIST]
[*][URL="http://www.html.de/"]9[/URL]
[*][URL="http://www.html.de/"]10[/URL]
[/LIST]
Code:
$(document).ready(function() { $('#nav .subnav').css('display', 'block').hide(); $('#nav a, #footer a').each(function() { if($(this).attr('href') == window.location) { $(this).addClass('active'); } }); $('#nav li').hover(function() { $(this).find('.subnav').slideDown(250); }, function() { $(this).find('.subnav').slideUp(250); }); });
Code:
/* Navigation & Footer */ #nav, #footer { height: 38px; padding: 0 10px; margin: 10px 0 0; background: #7c7c7c; } #footer { margin: 0; } #footer ul { width: 150px; margin: 0 auto; } #nav li, #footer li { height: 38px; float: left; position: relative; } #nav a, #footer a { height: 25px; padding: 13px 10px 0; color: #fff500; display: block; } #nav a:hover, #footer a:hover { text-decoration: none; background: #6e6e6e; } #nav a.active, #footer a.active { color: #fff; } #nav .subnav { width: 100%; position: absolute; background: #828282; display: none; } #nav li:hover .subnav { display: block; } #nav .subnav li { width: 100%; float: none; }
Code:
[LIST]
[*][URL="http://www.html.de/"]1[/URL]
[*][URL="http://www.html.de/"]2[/URL]
[*] [URL="http://www.html.de/"]3[/URL]
[LIST]
[*][URL="http://www.html.de/"]4[/URL]
[LIST]
[*][URL="http://www.html.de/"]5[/URL]
[/LIST]
[*][URL="http://www.html.de/"]6[/URL]
[LIST]
[*][URL="http://www.html.de/"]7[/URL]
[*][URL="http://www.html.de/"]8[/URL]
[/LIST]
[/LIST]
[*][URL="http://www.html.de/"]9[/URL]
[*][URL="http://www.html.de/"]10[/URL]
[/LIST]
Zuletzt bearbeitet: