zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Dropdown Menü als Dropup?!

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 10.02.2015, 22:17
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.02.2015
Ort: Hamburg
Beiträge: 3
Girlfrommars13 befindet sich auf einem aufstrebenden Ast
Standard Dropdown Menü als Dropup?!

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!

Geändert von Girlfrommars13 (10.02.2015 um 23:59 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 11.02.2015, 06:06
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

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;
}
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/

Geändert von etux (11.02.2015 um 06:17 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 11.02.2015, 17:05
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.02.2015
Ort: Hamburg
Beiträge: 3
Girlfrommars13 befindet sich auf einem aufstrebenden Ast
Standard

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..
Mit Zitat antworten
  #4 (permalink)  
Alt 12.02.2015, 08:12
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.004
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

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

Ist es das, was du suchst?
Mit Zitat antworten
  #5 (permalink)  
Alt 12.02.2015, 08:40
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.02.2015
Ort: Hamburg
Beiträge: 3
Girlfrommars13 befindet sich auf einem aufstrebenden Ast
Standard

Bingo!!

Merci!
Mit Zitat antworten
Antwort

Stichwörter
dropdown, dropup, men

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 01:17 Uhr.