✔ CSS Menü, aufklappbar bei Rollover

Status
Nicht offen für weitere Antworten.
Hi,

versuch es mal hiermit:

Code: 
ul#nav a {
  font-weight: bold;
  text-decoration: none;
  float: left;
}
Code: 
<ul id="nav">
        <li><a href="#"><img src="Images/Hanger.gif" width="50" height="102" border="0" /></a>
                <ul>
                <li><a href="#"><img src="Images/SpacerBar.gif" width="40" height="102" border="0" /></a></li>
                </ul>
        </li>
        <li><a href="#"><img src="Images/Hanger.gif" width="50" height="102" border="0" /></a>
                <ul>
                <li><a href="#"><img src="Images/SpacerBar.gif" width="40" height="102" border="0" /></a></li>
                </ul>
        </li>
        <li><a href="#"><img src="Images/Hanger.gif" width="50" height="102" border="0" /></a>
                <ul>
                <li><a href="#"><img src="Images/SpacerBar.gif" width="40" height="102" border="0" /></a></li>
                </ul>
        </li>
        <li><a href="#"><img src="Images/Hanger.gif" width="50" height="102" border="0"/></a>
                <ul>
                <li><a href="#"><img src="Images/SpacerBar.gif" width="40" height="102" border="0"/></a></li>
                </ul>
        </li>
</ul>
 
Hi!

Ich habe genau das gesucht, nur kann ich mit dem Listenelemt nichts anfangen, weil ich das ganze in Container haben möchte, um dort meinen Seiteninhalt unterzubringen.

Bsp:

link1, link2, link3>inhaltinhaltinhalt<, link4, link5....

Ist dies denn möglich?

Am besten wäre es, wenn die links auch container wären.

:)
 
Maik hat gesagt.:
Hierbei handelt es sich zwar auch um ein "Listenmenü", aber die jeweiligen "Inhalte" sind in span-Containern untergebracht.
Zum Vergrößern anklicken....

Jo, habe bemerkt, das die Grafiken quasi als LINK funktionieren, nun möchte ich dafür aber auch einen Container, bwz, ich brauche einen^^

Hab mir die Seite weiter angesehen, und bin auf das hier gestoßen: http://www.cssplay.co.uk/menus/tabmenu.html
Dies entspreche fast meine Vsrstellungen, sind sogar schon abgerundete Ecken drin.
Nur brauche ich das ganze halt in der Horizontalen.
Wenn mir jemand das komplette Script so unformatieren könnte, das es halt Horizontal ist, wäre dies >>für mich<< echt sehr hilfreich.

MfG :rolleyes:
 
Dann versuch doch die Techniken der beiden Menüs zu vereinen.

Es ist nicht der Sinn dieses Forums, einem User nach seinen Wünschen eine gebrauchsfertige Vorlage zu erstellen, sondern ihm Hilfe zur Selbsthilfe zu leisten.
 
Das ist klar, ich habe es ja schon selbst veruscht, doch meine Kenntnisse in CCS liegen momentan im Ersatz von Tabellenlayouts.

Ich bekomme das einfach nicht hin, wharscheinlich felht mir einfach das logische Konzept hinter den Menus.

Also es wäre wirklich schön, wenn ihr mir da helfen könnt, denn sonst kann ich mein ganzen Konzept meiner Seite in dem Müll schmeißen.
 
Das nachfolgende Beispiel erhebt keinen Anspruch auf Vollständigkeit, wie z.B. abgerundete Ecken, oder ähnliches, sondern demonstriert "nur" die Methodik.

Das Modell habe ich ausschliesslich mit DIVs umgesetzt und in den mir zur Verfügung stehenden modernen Browsern (FF, IE7, Mozilla, Netscape, Opera, SeaMonkey) erfolgreich getestet.

Lediglich die Vorgängerversionen des IE7 können damit nichts anfangen, da sie die allgemeine Pseudoklasse div.box:hover nicht unterstützen, mit der die unsichtbare Box .article eingeblendet wird.

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<title>horizontal-boxes</title>

<style type="text/css">
<!--
* {
margin:0;
padding:0;
}

div.box {
float:left;
background:#ddd;
padding:3px 0 0px 10px;
}

div.box div.title {
float:left;
}

div.box div.article {
display:none;
}

div.box:hover div.article {
display:block;
float:left;
width:350px;
background:#fff;
border:1px solid #ddd;
margin-top:-3px;
}
-->
</style>

</head>
<body>

<!-- box 1 -->
<div class="box">
     <div class="title">box 1</div>
     <div class="article">
          <h2>article 1</h2>
          <p>with some dummy text to expand the box</p>
     </div>
</div>
<!-- box 2 -->
<div class="box">
     <div class="title">box 2</div>
     <div class="article">
          <h2>article 2</h2>
          <p>with some dummy text to expand the box</p>
          <table border="1" width="100%">
                 <tr><td>tables</td><td>also</td><td>possible</td></tr>
          </table>
     </div>
</div>
<!-- box 3 -->
<div class="box">
     <div class="title">box 3</div>
     <div class="article">
          <h2>article 3</h2>
          <p>with some dummy text to expand the box</p>
     </div>
</div>

</body>
</html>
 
Hey viele Dank, genau so hab ichs mir vorgestellt.

Was passiert dann bei den vorherigen Versionen des IE, hab "leider" schon die 7er Version drauf, kanns somit also nicht testen?

Also nochmals vielen Dank, und mit der Zeit kann ichs vllt auch selbst "entwickeln"
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück