• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Schöne "Aktionsleiste"

Niklas

Niklas

Neues Mitglied
Hallo,

War mal kurz n paar Tage weg aber jetzt kann ich euch ja wieder zufragen ^^

Mir ist eine Aktionsleiste schon offt aufgefallen ich wollte nur einen Link haben wo so eine Leiste zu finden ist zum zeigen also habe ich heute in der Reli Stunde gesucht was garnicht so einfach war weil ich nur nach Wunder Seiten suchen durfte ansonsten gibts Ärger ^^

Aber ich habe so eine gefunden und dann auchnoch so eine schöne (Die Bunte leiste da)^^

Sind Wunder möglich?

Meine Frage:

Wie erstellt man so eine Leiste hatt irgentwas mit onmouse zu tun habe keine Tutorials dazu gefunden mir fällt einfach kein anderes Wort dafür ein als Aktionsleiste (Hab mir das in nem Game angewöhnt^^)

Gruß Niklas
 
Dies ist ein Pulldownmenü
Such das wort mal bei google und du wirst unzählige ergebnisse bekommen ;)
 
Hallo,

www.w-d-b-testgelände.de/test/test.html

Dort Teste ich gerade die Leiste

Nur wen man über die Leiste geht ist die Box die dan erscheint nicht an der Oberen Leist und leicht versetzt ! Wie macht man das es direckt dadrunter ist und nicht versetzt ?

Und die Css Datein ist ziemlich Groß das alles für sone Leiste ? Wen da was raus kann bitte sagen.

css datein
Code: 
#menu {
font-family: Verdana;
font-size: 1em;
line-height: 1.5;
float: left;
} 
#menu ul {
float: left;
width: 150px;
list-style-type: none;
} 
#menu h3 {
font-size: 1em;
text-align: center;
color: #000;
border: 1px solid #003366;
background: #ff8000;
}
#menu a {
text-decoration: none;
display: block;
border: 1px solid #ccc;
text-align: center;
background: #ff9224;
color: #003366;
} 
#menu a:hover {
color: #ff9224;
background: #003366;
} 
#menu li {
position: relative;
}
#menu ul ul {
position: absolute;
z-index: 2;
display: none;
} 
#menu ul li:hover ul {
display: block;
} 
*+ html #menu ul li {
float: left;
width: 100%;
} 
* html #menu ul li {
float: left;
width: 100%;
}
*html body {
behavior: url(csshover3-source.htc);
font-size: 100%;
}

*html #menu ul li a {
height: 1%;
} 
#menu a.direkt:link {
font-size: 1em;
font-weight: bold;
text-align: center;
color: #000;
border: 1px solid #003366;
background: #ff8000;
}
#menu a.direkt:hover {
color: #ff9224;
background: #003366;
border: 1px solid #ccc;
}
html datei

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd">


<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="../style/tessststyle.css" /> 
</head>
<body>
<div id="menu"><!-- öffnet die Navigationsleiste-->

   <ul><!-- öffnet den ersten Themenblock -->

      <li><!-- öffnet die Listeneinträge von Thema 1 -->

         <h3>Thema 1</h3>

            <ul><!-- öffnet die Klappnavi von Thema 1 -->

               <li><a href="#">Thema 1.1</a></li>

               <li><a href="#">Thema 1.2</a></li>

               <li><a href="#">Thema 1.3</a></li>

            </ul><!-- schließt die Klappnavi von Thema 1 -->

         </li><!-- schließt die Listeneinträge von Thema 1 -->

   </ul><!--schließt den ersten Themenblock-->

</div><!-- schließt die Menüleiste #menu -->

<div style="clear: both;"> </div> <!--cleart die gefloatete Menüleiste-->
</body>
</html>
Das alles kommt von dem Tutorial : Horizontales Dropdown-Menü
 
Zuletzt bearbeitet:
Ist es eig schwer sowas selbst zu schreiben ? Eig brauch man ja nur Schrift mit Hintergrund und wen man da mit der Maus drübergeht erscheint dadrunter die Box mit den Links ! Nur ich hab Kein Plan wie ich das machen soll ^^

Gruß Niklas
 
Hallo Niklas.

Hast du dir eigentlich schon die Links von Prasedonym angesehen.
Da steht doch genau beschrieben wie es gemacht werden muss.

Gruss
Elroy
 
Niklas,

die Grundstruktur von so einer Menüleiste schaut so aus

HTML: 
<div>
<ul>
  <li><a href="datei.php">Start</a> <!-- erster Menüpunkt -->
  </li>
</ul>
..
....
...
<div>
Jetzt mußt du nur noch <ul> und <a die Eigenschaften (Farbe,Größe) zuweisen
Das hover bedeutet , wenn du das Menü mit der Maus berührst , da machst du dann z.B. die Farbe etwas heller
 
Zuletzt bearbeitet:
Code: 
<div>
<ul>
<li><a href="datei.php">Start</a> <!-- erster Menüpunkt -->
<li><a href="#">Thema 1.1</a></li>
<li><a href="#">Thema 1.2</a></li>
<li><a href="#">Thema 1.3</a></li>
</ul>
<div>
So Richtig ?

<div id="schrift" style="background-color: black; width: 870px; height: auto;"><br>
Zum Vergrößern anklicken....
Hintergrundfarbe habe ich immer so gemacht wie macht man das in Css ?

Gruß Niklas
 
FALSCH

PHP: 
< div id="Navigation">
<ul class="auswahl">
  <li><a href="datei.php">Start</a> <!-- erster Menüpunkt -->
  </li>
</ul>
<ul>
  <li><a href="datei2.php">Thema 1.1</a> <!-- zweiter Menüpunkt -->
  </li>
</ul>
 
<div>

HTML: 
#Navigation {background-color: #000000; .................}
 
Klappt und wie geht das jetzt mit dem Hover ? Damit soll doch wen man mit der Maus über das andere geht die Unterthemen angezeigt werden oder ?

Gruß Niklas
 
So z.B.

Farbe ändern, wenn man mit der Maus drüberfährt
Beim Untermenü mußt du noch ein Menü anlegen mit der ID="Untermenue" und machst es unsichtbar und beim hover sichtbar, ist etwas komplizierter

HTML: 
ul a:hover {
  Background-color:#ffffff;
}  /*der link wenn man mit der maus drüber fährt */
HTML: 
visibility:visible; sichtbar
visibility:hidden ; unsichtbar
 
Kann man dem Untermenü nicht einfach eine id geben und den im Css Teil unsichtbar und dan bei hover sichtbar ?

Gruß Niklas
 
Ich bekomm das einfach nicht hin !

Das soll so werden also da ist c.a 150 x 30 px und wen man da mit der Maus drübergeht kommt das andere dadrunter !

Code: 
<div id="Navigation">
<ul class="auswahl">
<li><a href="datei.php">Start</a> <!-- erster Menüpunkt -->
</li id="unsichtbar">
</ul>
<ul>
<li><a href="datei2.php">Thema 1.1</a> <!-- zweiter Menüpunkt -->
</li>
</ul>
</div>
Code: 
ul a:hover {
Background-color:#ffffff;
width: 20px; 
height: auto;
visibility:visible; 
}
# unsichtbar {
Background-color: red;
visibility:hidden ; 
}
Gruß Niklas
 
Mußt du natürlich verschachteln
so müßte es gehn
HTML: 
  <body>
 <ul class="Menue">
  <li><a href=".....">menue1</a> 
        <ul >
       <li><a id="untermenue" href="#" >untermenue1</a> </li>
       <li> <a href="#" >untermenue2</a> </li>
        <li><a href="#" >untermenue3</a>  </li>
            </ul>
 </li></ul>
 
  </body>

HTML: 
#Untermenue  li ul { display:none; }
#Untermenue  li:hover ul { display:block; }
 
Niklas schrieb:
So Richtig ?
Zum Vergrößern anklicken....
Nein, das <div> ist überflüssig. Das hat Dein Tippgeber nicht richtig erklärt.

Mit <div> werden mehrere Elemente gruppiert. Wenn ein <div> nur ein Element (hier <ul>) enthält, ist es überflüssig und erschwert die Übersicht über den Code. Im Extremfall wird sog. div-Suppe daraus.

Liebe Grüße,
-Efchen
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben