✔ DropdownMenu für fertiges Design?!

[Headymaster]

Hallo!

Also ich bin grad dabei ein Design an den Code anzupassen...
Jetzt fehlt mir nur noch eine Möglichkeit die Arrays aus Daten in einer Dropdownliste auslesen zu lassen...

Da ich sowas noch nie gemacht habe und ich hier im Forum immer nur Beiträge zu CSS-Design gefunden habe frage ich einfach ganz lieb mal nach ob mir da ma jmd. helfwen kann

Also habe mal ein Bild angefügt...darin sieht man die Navigation und wenn ich zum Beispiel über einen der Buttons fahre soll unter diesem eine Liste erscheinen mit Links die ich per Array mit Daten füttern würde die aus meiner Model und Controller schicht kommen

Wäre supa supa lieb von euch wenn ihr mir da mal helfen könntet

MFG Nilson

 

[Gumbo]

Wo ist denn das angefügte Bild?

 

[Headymaster]

Huch da habe ich es doch glatt vergessen xD

Also nun hier ist es ;-)

MFG Nilson

 

[Maik]

Hi,

ich denke, dass du bei Stu Nicholls' variantenreichen Repertoire an CSS-DropdownMenus fündig werden solltest.

 

[Headymaster]

Ja also habe es mir angeschaut und auch gut was hinbekommen nur ist das Prob, dass irgendwie der Hintergrund des Dropwdownmenus nicht gefärbt wird und auch die links nicht nach links positioniert sind...sprich es passen immer 2 Links in eine Reiche und dann kommt die nächste Reihe..

Hier mal der Code des Menus:

<td colspan="2" class="submenu">
		  <ul>
		   <li>
		     <a href="#" onMouseOver="Over('7', '_files/images/design/A-23_08_active.gif'); showNav('gruppenangebote');" onMouseOut="Out('7', '_files/images/design/A-23_08.gif'); hideNav();">
			<img id="7" src="_files/images/design/A-23_08.gif" width="138" height="41" alt="">
			</a>
			  <ul>
			    <li>Testlink1</li>
				<li>Testlink2</li>
				<li>Testlink3</li>
			  </ul>
		   </li>
		  </ul>
		</td>

Su und hier der CSS-Kram^^

/* ### Naviagtion ### */

.submenu ul ul {
  visibility:hidden;
  position:absolute;
  height:0;
  width:138px;
  background-color:#999999
}

.submenu a:hover ul, .submenu li:hover ul {
  visibility:visible;
}

.submenu ul {
  list-style:none;
  padding:0;
  margin:0;
}

.submenu li {
  float:left;
  position:relative;
  z-index:100;
}

.submenu a , .submenu :visited {
  display:block;
  font-size:10px;
  color:#000;
  background:#999999;
  text-decoration:none;
}

.submenu :hover {
  background-color:#D3D3D3;
  color:#000000;
}

Würde mich super über Hilfe freuen

MFG Nilson

 

[Maik]

Könntest du mal etwas konkreter werden, welche Links aus welcher Ebene nicht nebeneinander angeordnet werden und in welcher Menü-Ebene die Hintergrundfarbe nicht dargestellt wird?

In den folgenden Selektoren fehlt wohl das a-Element:

.submenu a , .submenu a:visited {
  display:block;
  font-size:10px;
  color:#000;
  background:#999999;
  text-decoration:none;
}

.submenu a:hover {
  background-color:#D3D3D3;
  color:#000000;
}

 

[Headymaster]

Die Links in der 2. li Ebene werde nicht untereinander angezeigt und außerdem wird der Hintergrund der einem Mouseover über den Button halt als dropdown angezeigt werden sollte hinter dem eigentlichen Hintergrund geladen und nicht sichtbar davor....sozusagebn hinter dem design ist dann die Hintergrundfarbe des Dropdownmenus aber der TExt wird angezeigt...

MFG Nilson

 

[Maik]

und die links nicht nach links positioniert sind...sprich es passen immer 2 Links in eine Reiche und dann kommt die nächste Reihe..

Die Links in der 2. li Ebene werde nicht untereinander angezeigt

Wie jetzt? Sollen die Links nun nebeneinander oder untereinander angeordnet werden?

 

[Headymaster]

Ja es war anscheinend etwas wirr geschrieben...

Also momentan ist es so:

- links untereinander
- :hover Effekt
- im IE --> Dropdownmenu nicht unter dem Bild unter dem button, wie mans nimmt
--> im FF direkt darunter
- im IE außerdem design verzogen... zwischen Navigation und Content ist das Design abgeshnitten ( Bei dem Problem hattest du mir schon ne Lösung gesagt aber die hilft nun nicht mehr seit der Navigation ^^ )

Joar so das wärs grob gesagt und hier noch meine neues Stylesheet für die Navigation:

.submenu ul ul {
  visibility:hidden;
  position:absolute;
  height:0;
  width:138px;
  background-color:#999999;
}

.submenu li li {
  text-align:left;
  text-indent:5px;
}

.submenu a:hover ul, .submenu li:hover ul {
  visibility:visible;
}

.submenu ul {
  list-style:none;
  padding:0;
  margin:0;
}

.submenu a , .submenu a:visited {
  display:block;
  font-size:10px;
  color:#000;
  background:#999999;
  text-decoration:none;
}

.submenu a:hover {
  background-color:#D3D3D3;
  color:#000000;
}

und der dazugehörige HTML-Part:

<td colspan="2" class="submenu">
		  <ul>
		   <li>
		     <a href="#" onMouseOver="Over('7', '_files/images/design/A-23_08_active.gif'); showNav('gruppenangebote');" onMouseOut="Out('7', '_files/images/design/A-23_08.gif'); hideNav();">
			<img id="7" src="_files/images/design/A-23_08.gif" width="138" height="41" alt="">
			</a>
			  <ul>
			    <?php foreach ($this->groupang as $ang) : ?>
				<li><a href="angebote/show/<?php echo $this->escape($ang['ang_id']); ?>"><?php echo $this->escape($ang['ang_name']); ?></li></li>
				<?php endforeach; ?>
			  </ul>
		   </li>
		  </ul>
		</td>

MFG Nilson

 

[Maik]

Hi,

ich hab den CSS-Code soweit überarbeitet, damit die genannten Darstellungsfehler im IE behoben sind:

<style type="text/css">
.submenu ul li ul {
  visibility:hidden;
}

.submenu ul, .submenu ul li ul {
  list-style:none;
  padding:0;
  margin:0;
  position:absolute;
  width:138px;
}

.submenu ul li ul li {
  text-align:left;
  text-indent:5px;
}

.submenu a:hover ul, .submenu li:hover ul {
  visibility:visible;
}

.submenu a:link, .submenu a:visited {
  display:block;
  font-size:10px;
  color:#000;
  background:#999999;
  text-decoration:none;
  width:100%;
}

.submenu a:hover {
  background:#D3D3D3;
  color:#000;
}
</style>
<!--[if IE]>
<style type="text/css">
.submenu ul li ul {
  top:41px;
}

.submenu ul li ul li {
  display:inline;
}

.submenu a:link, .submenu a:visited {
  height:1%;
}
</style>
<![endif]-->