Dropdown Menü als Dropup?!

Girlfrommars13 · #1 (**permalink**) 10.02.2015, 22:17

Hallo,

vor einigen Jahren habe ich mir HTML und CSS selbst beigebracht und eine eigene Website erstellt, allerdings sehr chaotisch im Quellcode. Nun will ich alles besser machen, dazulernen etc.
Derzeit geht es um die Menüleiste auf folgender Seite:

www.riekmund.com - fashiondesign, art and poetry

Ich möchte nun die 4 Menüpunkte, die derzeit etwas wirr im Raum stehen (new collection, dog coat- comes soon,...) als "DropUp" Menü des Hauptmenüpunktes "collections&shop" gestalten, das bei :hover aufklappt. Der Pfeil soll nachher auch weg sein.

Mein CSS Code, an dem ich jetzt weitergearbeitet habe, sieht nun so aus:

Code:

#menue {
	position: absolute;
 	bottom: 20px;
	right: 40px;
        font-family: Lucida Sans Typewriter, Courier New;
        font-size: 15px;
        line-height: 2;
 	color: #4b4949;
	}

#menue ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	}
	
#menue li.menue1 {
	display:inline-block;
        text-align: center;
        margin:5px;
	}
	
.menue1 > a {
	display:inline-block;
        width: 60% auto;
        text-align: center;
        opacity: 0.3;
	}
	
.menue1 ul {
	display:none;
	}
	
.menue1 a, .menue2 a {
	padding: 0px 0px;
	color: #4b4949
	margin: 0;
	}
	
.menue2 a {
	position: relative;
        width: 60% auto;
        text-align: center;
        clear: both;
	}

#menue a:hover {
 	color: #4b4949;
 	background-color: # !important;
 	opacity: 1;
	}

.menue1.on a {
 	color: #4b4949;
 	background-color: # !important;
 	opacity: 1;
	}


.menue1:hover ul {
 	display: block;
 	z-index: 500;
	}

und der HTML Code:

HTML-Code:

<div id="menue">
	<ul>
		<li class="menue1">
			<a href="http://www.riekmund.com/about.html"><img src="about.gif" alt="about"></a>
		</li>
		<li class="menue1">
			<a href=""><img src="collections_shop.png" alt="collections and shop"></a>
			<ul>
				<li class="menue2"><a href="http://www.riekmund.com/collectionsandshop.html" >new collection</a></li>
				<li class="menue2">dog coat - comes soon</li>
				<li class="menue2"><strong>project wedding dress</strong></li>
				<li class="menue2"><a href="http://www.riekmund.com/wherethewildthingsare.html">graduation collection</a></li>
			</ul>
		</li>
		<li class="menue1">
			<a href="http://www.riekmund.com/CV.html"><img src="CV.gif" alt="CV"></a>
		</li>
		<li class="menue1">
			<a href="http://www.riekmund.com/artandpoetry.html"><img src="art_poetry.gif" alt="art and poetry"></a>
		</li> 
		<li class="menue1">
			<a href="http://www.riekmund.com/imprint.html"><img src="imprint.gif" alt="imprint"></a>
		</li>
	</ul>
</div>

Dieses Zwischenergebnis ist leider noch nicht online zu betrachten. Ich bekomme es aber immer noch nicht hin, das ganze nach oben ausklappen zu lassen und finde im Netz auch nichts brauchbares, was mir hilft.

So wie folgt stelle ich es mir ca. vor (mit Photoshop gebastelt):

Bildschirmfoto 2015-02-10 um 21.45.06.png - directupload.net

Ich hoffe, ihr habt Tipps für mich, würde mich super freuen!

Vielen Dank schonmal im Voraus!

etux · #2 (**permalink**) 11.02.2015, 06:06

Morgen.

Hier was zum testen (teilweise kommentiert) :

Code:

#menue {
	position: absolute;
 	bottom: 20px;
	right: 40px;
	font-family: Lucida Sans Typewriter, Courier New;
	font-size: 15px;
	line-height: 2;
 	color: #4b4949;
}
#menue ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}
#menue li {
	position: relative; /* Containing Block (Begriff bitte googeln) für das Submenü */
	display: inline-block;
	text-align: center;
	margin: 5px;
}
#menue a,
#menue strong {
	display: block;
	white-space: nowrap; /* Verhindert Textumbrüche bei Leerzeichen */
	color: #4b4949;
	opacity: 0.3;
}
#menue li ul {
	position: absolute;
	bottom: 100%; /* Setzt die untere Kante der Liste (Submenü) auf die obere Kante des Listenelements (Hauptmenü-Element) */
	left: -90%; /* Versetzt das Submenü weiter nach links vom Hauptmenü-Element */
	padding-right: 90%; /* Platz für das Hintergrund-Bild (Pfeil) */
	background: url(Pfeil-Bild.gif) no-repeat right bottom;
	display: none;
}
#menue li:hover ul {
 	display: block;
}
#menue a:hover,
#menue strong {
 	background-color: #ddd; /* hellgraue Hintergrundfarbe nur als Beispiel */
 	opacity: 1;
}

Nachtrag:
Dein Bildschirmfoto war vorhin nicht aufrufbar. Jetzt sehe ich, dass Du eine seitliche (nach links) Versetzung des Submenüs und ein Hintergrund-Pfeil nicht brauchst.
Daher reicht es beim Submenü folgende Formatierung:

Code:

#menue li ul {
	position: absolute;
	bottom: 100%;
	left: 0;
	display: none;
}

Girlfrommars13 · #3 (**permalink**) 11.02.2015, 17:05

Du bist mein Held

Vielen Dank!

Hätte ich ja gar nicht alles "umschreiben" müssen, der Code orientiert sich ja jetzt doch mehr am vorherigen.

Jetzt gibt es nur noch folgendes Problem:

Die Hauptmenüpunkte haben ja eine opacity 0.3 und keine backgroundfarbe. Sie sollen aber bei hover opacity 1 bekommen UND einen background, der wiederum opacity 0.3 hat (beides #4b4949).
Lässt sich das beides in einer Klammer {...} umsetzen?

Abgesehen davon sollen die Links im Untermenü alle (ob hover oder nicht) opacity 1 haben.

Hab schon rumprobiert, allerdings hab ich bisher nur die backgroundcolor opacity 0.3 erreicht. Leider bleiben die Links dann auch in 0.3, sodass sie quasi im background verschwinden..

cloned · #4 (**permalink**) 12.02.2015, 08:12

Du kannst die Hintergrundfarbe in rgba-werten angeben:
background-color:rgba(255,0,0,0.5);

Ist es das, was du suchst?

Girlfrommars13 · #5 (**permalink**) 12.02.2015, 08:40

Bingo!!

Merci!

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Dropdown Menü selber Dropdownen	majutu	CSS	7	16.10.2014 13:11
Problem mit einer DropDown Liste	manuel_g	CSS	2	31.03.2010 10:11
Zwei DropDown Navigationen verschmelzen	Drian	Offtopic	1	13.02.2010 14:00
DropDown CSS/JS Mix, Kleine Frage	pkipper	CSS	0	01.10.2008 10:23
Suche CSS Dropdown Menü	Lloyd Larkin	CSS	0	11.10.2006 20:50