Zum Inhalt springen

"Dropdown"-menü

callidus

Von callidus
in Webdesign

 Teilen

Empfohlene Beiträge

callidus

callidus

Geschrieben
Geschrieben

HI

ich habe auf der seite der pcwelt (Das Portal für Computer und Technik - PC-WELT) entdeckt, das die so ein nettes menü haben, was sich so ausklappt, sobald man mit dem Cursor drübergeht.

nun fände ich es super, wenn ihr mir erklären könntet, wie ich sowas bewerkstelligen kann. AUs dem quelltext der seite bin ich nciht wirklich schlau geworden, weil der einfsach völlig überladen ist.

mfg

Link zu diesem Kommentar
Auf anderen Seiten teilen
callidus

callidus

Geschrieben
  • Autor
Geschrieben

der link hatte nur auf den ersten blick

habe mir mal das jQuick ****er... ausgesucht.

jedoch habe cih das problem, das ich mti dem javascript dort nix anfnagen kann. Nur dieses Ocdefragment funktioniert einfach nicht. ihc bnötige trotzdem noch den gnazen css teil und die 3 verknüpften css/javascript-datein...

kann mir das mal bitte jemand erklären?

Link zu diesem Kommentar
Auf anderen Seiten teilen
callidus

callidus

Geschrieben
  • Autor
Geschrieben (bearbeitet)

So

ich habe dann mal ein wenig herumgetestet...

hier der code....

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<link rel="stylesheet" media="all" type="text/css" href="../css/default.css" />


<style type="text/css">

/* ================================================================ 

This copyright notice must be untouched at all times.


The original version of this stylesheet and the associated (x)html

is available at http://www.cssplay.co.uk/menus/final_drop2.html

Copyright (c) 2005-2009 Stu Nicholls. All rights reserved.

This stylesheet and the associated (x)html may be modified in any 

way to fit your requirements.

=================================================================== */

/* style the outer div to give it width */

.menu { 

font-size:0.85em;

padding-bottom:200px;

}

/* remove all the bullets, borders and padding from the default list styling */

.menu ul {

padding:0;

margin:0;

list-style-type:none;

}

.menu ul ul {

width:100px;

}

/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */

.menu li {

float:left;


position:relative;

}

/* style the links for the top level */

.menu a, .menu a:visited {

font-size:11px;

text-decoration:none;

padding-left:10px; 

color:#000; 

width:auto; 

height:30px;  

line-height:29px;

}

/* a hack so that IE5.5 faulty box model is corrected */

* html .menu a, * html .menu a:visited {

width:150px;

w\idth:139px;

}


/* style the second level background */

.menu ul ul a.drop, .menu ul ul a.drop:visited {

background:#949e7c;

}

/* style the second level hover */

.menu ul ul a.drop:hover{

background:#c9ba65;

}

.menu ul ul :hover > a.drop {

background:#c9ba65;

}

/* style the third level background */

.menu ul ul ul a, .menu ul ul ul a:visited {

background:#e2dfa8;

}

/* style the third level hover */

.menu ul ul ul a:hover {

background:#b2ab9b;

}

.menu ul ul ul :hover > a {

background:#b2ab9b;

}


/* hide the sub levels and give them a positon absolute so that they take up no room */

.menu ul ul {

visibility:hidden;

position:absolute;

height:0;

top:31px;

left:0; 

width:150px;

}

/* another hack for IE5.5 */

* html .menu ul ul {

top:30px;

t\op:31px;

}


/* position the third level flyout menu */

.menu ul ul ul{

left:150px; 

top:0;

width:150px;

}

/* position the third level flyout menu for a left flyout */

.menu ul ul ul.left {

left:-150px;

}


/* style the table so that it takes no part in the layout - required for IE to work */

.menu table {position:absolute; top:0; left:0;}


/* style the second level links */

.menu ul ul a, .menu ul ul a:visited {

background:#d4d8bd; 

color:#000; 

height:auto; 

line-height:1em; 

padding:5px 10px; 

width:129px

/* yet another hack for IE5.5 */

}

* html .menu ul ul a{

width:150px;

w\idth:129px;

}



/* style the top level hover */



/* make the second level visible when hover on first level list OR link */

.menu ul li:hover ul,

.menu ul a:hover ul{

visibility:visible; 

}

/* keep the third level hidden when you hover on first level list OR link */

.menu ul :hover ul ul{

visibility:hidden;

}

/* keep the fourth level hidden when you hover on second level list OR link */

.menu ul :hover ul :hover ul ul{

visibility:hidden;

}

/* make the third level visible when you hover over second level list OR link */

.menu ul :hover ul :hover ul{ 

visibility:visible;

}

/* make the fourth level visible when you hover over third level list OR link */

.menu ul :hover ul :hover ul :hover ul { 

visibility:visible;

}




</style>



</head>


<body id="www-cssplay-co-uk">

<table border=1><tr>

	<td class="navrow">

    <div class='menu'>

		<ul><li><a href="./ucp.php">Persönlicher Bereich</a></li></ul><ul><li><a href="./ucp.php?i=pm&folder=inbox"><strong>0</strong> neue Nachrichten</a></li></ul>

		<ul><li><a href="./calendar.php">Kalender</a></li></ul>

        <ul><li><a href="./gallery/index.php" title="Bilder Galerie">Galerie</a></li></ul>

        <ul><li><a href="./faq.php">FAQ</a></li></ul>

		<ul><li><a href="./search.php">Suche</a></li></ul>

            <ul>

            <li><a href="./memberlist.php">Mitglieder</a></li>

            <li><ul>

            <li><a href="./stars.php">Sterne</a></li>

            </ul></li>

            </ul>

            <ul><li><a href="./ucp.php?mode=logout&sid=7e1570ae154e455616bc79baec090e6f">Abmelden [ mojito ]</a></li></ul>

        </div>

	</td>

</tr>



</body>

</html>

jedoch habe ich das problem, das dort nix rausklappt ^^

auch wüsste ich gerne, wie cih diesen mosntrösen abstand vermeiden kann....

NAchtrag:

heir ncoh der link zur seite:

1.htm

Bearbeitet von callidus
Link zu diesem Kommentar
Auf anderen Seiten teilen
Toothrot

Toothrot

Geschrieben
Geschrieben
jedoch habe ich das problem, das dort nix rausklappt ^^

Das passiert wenn man Code kopiert, ohne ihn zu verstehen. Wenn Du jeden Menüpunkt in eine eigene Liste mit nur einem Listenelement packst, ist das nicht verwunderlich. Und wozu die Tabelle, die zudem nichtmal geschlossen wird? Schmeiß die raus.

Wie man eine unsortierte Liste korrekt erstellt, siehe hier:

SELFHTML: HTML/XHTML / Elemente zur Textstrukturierung / Listen

Ausklappende Submenüs werden entsprechend durch Verschachtelung realisiert.

Link zu diesem Kommentar
Auf anderen Seiten teilen
callidus

callidus

Geschrieben
  • Autor
Geschrieben (bearbeitet)

nach vielem hin und her habe ich den fehler jetzt gefunden.

jedoch stört mich eine kleinigkeit. die droppdown-menüleiste beginnt immer ganz rechts. ich hätte die gerne in der mitte centriert. wo muss ich da ansetzen?

mfg

Nachtrag:

derzeit habe ich das ganze als fixed gesetzt, damit dder dropdown immer über allem steht, da dieser header, ind as das droptdown-teil soll nru ein kleiner part der seite ist. jemand ne idee, wie ich einen mix aus fixed und relativ hinbekomme?

Bearbeitet von callidus
Link zu diesem Kommentar
Auf anderen Seiten teilen
Toothrot

Toothrot

Geschrieben
Geschrieben

Erstmal noch allgemeine Sachen:

[invalid] Markup Validation of http://soulsociety.so.funpic.de/trash/1.htm - W3C Markup Validator

Viele Fehler werden von der Funpic-Werbung erzeugt, aber nicht alle. Das Title-Element fehlt. Deine äußere Liste wird nicht geschlossen.

jedoch stört mich eine kleinigkeit. die droppdown-menüleiste beginnt immer ganz rechts. ich hätte die gerne in der mitte centriert. wo muss ich da ansetzen?

Man kann Block-Elemente per Seitenabstand zentrieren.

derzeit habe ich das ganze als fixed gesetzt, damit dder dropdown immer über allem steht, da dieser header, ind as das droptdown-teil soll nru ein kleiner part der seite ist. jemand ne idee, wie ich einen mix aus fixed und relativ hinbekomme?

Wenn Du mir erklärst, was ein Mix aus fixed und relative sein soll, kann ich Dir vielleicht helfen.

Link zu diesem Kommentar
Auf anderen Seiten teilen
callidus

callidus

Geschrieben
  • Autor
Geschrieben (bearbeitet)

Hi,

bei dem ganzen handelt es sich um ein forum (phpbb3). das heißt ich kann nciht einfach dort in den quelltexten rumfuschen und plötzlich tabellen öffnen/schließen, ohne das ich alle datein durchsuchen muss....

das was in der 1.htm ist ist immer nur ein auschnitt des headers

wiedu evtl. weißt besteht eine phpbb-seite immer aus drei seiten uase.

overall_header (da wo das dropdown drin ist), inhalt, overall_footer

das problem ist ja, das der overall_header direkt unter dem dropdown zu ende ist, also ab dort ne andere seite beginnt. nun habe ich das problem, das sobald ich die position als relativ setze, was ja im normalfall das sinnvollste ist ^^, generell hinter der "2.seite" also dem inhal verschwindet. nur wenn ich die position auf fixed setze, dann legt es sich quasi über die 2. seite. jedoch ist es so, das ich bei dem fixed jedes droppdown-leil quasi einen eigenen style braucht. verstehst du, wo das problem ist?

zur ausrichtung:

mit 

text-align:center;

würde cihd as ja theoretisch in die mitte zaubern, jedoch setzt das float:left dagegen, sodasses trtzdem rechts klebt. zufälig eine idee, wie ich das trotzdem hinbekomme? nehme ich fload:left raus, ist alles in der mitte untereinander....

Bearbeitet von callidus
Link zu diesem Kommentar
Auf anderen Seiten teilen
Toothrot

Toothrot

Geschrieben
Geschrieben
Hi,

bei dem ganzen handelt es sich um ein forum (phpbb3). das heißt ich kann nciht einfach dort in den quelltexten rumfuschen und plötzlich tabellen öffnen/schließen, ohne das ich alle datein durchsuchen muss....

das was in der 1.htm ist ist immer nur ein auschnitt des headers

Nichtsdestotrotz fehlt da ein </ul> in Deinem Menü.

das problem ist ja, das der overall_header direkt unter dem dropdown zu ende ist, also ab dort ne andere seite beginnt. nun habe ich das problem, das sobald ich die position als relativ setze, was ja im normalfall das sinnvollste ist ^^, generell hinter der "2.seite" also dem inhal verschwindet. nur wenn ich die position auf fixed setze, dann legt es sich quasi über die 2. seite. jedoch ist es so, das ich bei dem fixed jedes droppdown-leil quasi einen eigenen style braucht. verstehst du, wo das problem ist?

Ähm... nein, keine Ahnung warum das "verschwinden" soll.

zur ausrichtung:

mit 

text-align:center;
würde cihd as ja theoretisch in die mitte zaubern, jedoch setzt das float:left dagegen, sodasses trtzdem rechts klebt. zufälig eine idee, wie ich das trotzdem hinbekomme? nehme ich fload:left raus, ist alles in der mitte untereinander....
Wie gesagt, Seitenabstand. 
.menu {

margin-left:auto;

margin-right:auto;

}

Link zu diesem Kommentar
Auf anderen Seiten teilen
Toothrot

Toothrot

Geschrieben
Geschrieben
HI,

habe das mal geändert. habe jetzt mal die htm des forums angehängt, da siehst du dann mal was ich emien mit dem verschwinden...

Hier liegt der Hund begraben:

.navrow {

	background: #3b83c6 url(images/buttons.gif) top left repeat-x; 

	height: 21px;

	[B]overflow: hidden;[/B]

	border-bottom: solid 1px #000;

	border-top: solid 1px #000;

	color: #F0E80A;

	text-align: center;

	font-size: 11px;

	padding: 1px;

}

das mit dem margin-left etc. funzt übrigens nicht....

Das funktioniert bestens. Das Problem ist, dass sich das div .menu (Hier wäre eine ID statt einer Klasse besser, das nur nebenbei) innerhalb einer Tabellenzelle befindet und sich divs in tds offensichtlich auf die Breite der Zelle ausdehnen. Und wenn man ein div mit 100% Breite zentriert, sieht das natürlich genau so aus wie vorher. Wie man das jetzt löst, weiß ich nicht. Das ist halt eins von vielen Problemen von Tabellen-Layouts. Phpbb ist Mist. :P

Link zu diesem Kommentar
Auf anderen Seiten teilen

Dein Kommentar

Du kannst jetzt schreiben und Dich später registrieren. Wenn Du ein Konto hast, melde Dich jetzt an, um unter Deinem Benutzernamen zu schreiben.

Gast
Auf dieses Thema antworten...

×   Du hast formatierten Text eingefügt.   Formatierung wiederherstellen

  Nur 75 Emojis sind erlaubt.

×   Dein Link wurde automatisch eingebettet.   Einbetten rückgängig machen und als Link darstellen

×   Dein vorheriger Inhalt wurde wiederhergestellt.   Editor leeren

×   Du kannst Bilder nicht direkt einfügen. Lade Bilder hoch oder lade sie von einer URL.

×
 Teilen
Zur Themenübersicht

Fachinformatiker.de, 2024 by SE Internet Services

fidelogo_small.png

Schicke uns eine Nachricht!

Fachinformatiker.de ist die größte IT-Community
rund um Ausbildung, Job, Weiterbildung für IT-Fachkräfte.

Links

Fachinformatiker.de App

Download on the App Store
Get it on Google Play

Kontakt

Hier werben?
Oder sende eine E-Mail an

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

×
×
  • Neu erstellen...