2 subnavs nebeneinander??

[Rocky007]

Hallo, ich habe bisher folgendes: HTML:

[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]

Dazu erstelle ich bei "subnav" ein Untermenü, dass nach unten ausklappt über: JQUERY:

 $(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);     }); });

CSS

 /* 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; }

Ist es nun möglich, neben der "subnav" eine "subnav2" zu erstellen, die dann rechts neben der "subnav" erscheint mit einträgen? In HTML:

[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]

Was müsste ich dazu an meinem jquery Code verändern verstehe das nicht ganz...

 

[threadi]

Den HTML-Code muss man dafür nicht ändern, eher den CSS-Code den Du aber nicht gezeigt hast.

 

[Rocky007]

Habe den CSS Code mal oben eingefügt

 

[threadi]

Könntest Du das auch noch besser formatiert zeigen? Ist ja schwer lesbar :|

 

[Rocky007]

Hallo, leider klappt das mit der Formatierung hier nicht.... Habe alles mal als .txt file hier: http://vocals.square7.ch/Frage.txt

 

[Rocky007]

Jemand eine Ahnung, wie ich es umschreiben müsste

 

[Arcsinh]

Nur mal so als Tipp:
es ist sehr unwahrscheinlich, dass dir jemand hilft, wenn du nicht bereit bist, die Code-Tags so zu nutzen, wie sie gedacht sind. Und auch auf deine Seite warte ich schon seit 10 Sekunden, da tut sich nichts.
Also, noch ein Versuch bitte.

 

[Gilles]

Hallo, leider klappt das mit der Formatierung hier nicht.... Habe alles mal als .txt file hier: http://vocals.square7.ch/Frage.txt

Ich hab mir mal die Mühe gemacht und das von Eclipse formatieren lassen :)

$(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);
  });
});

/* 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;
}

 

[Rocky007]

Ich hab mir mal die Mühe gemacht und das von Eclipse formatieren lassen :)

 $(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);   }); });

 /* 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; }

Danke dir... Bei mir kommt immer wieder nur das selbe raus... Hat jemand eine Idee, wie ich das umsetzen könnte