Dropdown Navigation im liquiden Design erstellen

Matrox · 20. Oktober 2013

Hallo zusammen,

habe eure Videotutorials über liquid Design gesehen und finde es klasse diese Art von Webseiten zu erstellen. Nun habe ich eine Frage dazu:

Kann man eine horizontale Dropdown Navigation auch liquide zum Design erstellen, nur mit HTML und Css. Also ohne jquery oder ähnliches in etwa so wie hier: http://webdesigntutsplus.s3.am…pdowns-21c7868/index.html

Geht das, bisher ist es mir nicht gelungen und wenn dann ist die Art des überlappenden wenn man den Bildschirm verkleinert nicht gerade toll.

Wisst ihr da was dazu?

lauras · 20. Oktober 2013

Hallo Matrox,

natürlich geht das. eine Herangehensweise ist, media queries einzusetzen - sprich du definierst verschiedene Layout-Regeln je nach Auflösung.
Passt das für dich? Schau es dir doch mal an.

Grüße
Laura

Matrox · 21. Oktober 2013

bisher habe ich es so gelöst:

HTML

<!DOCTYPE html>
<html lang="de">
<head>
	<meta charset="utf-8" />
	<title>Test</title>
	<link href="design.css" type="text/css" rel="stylesheet" />
</head>
<body>
	<div id="menu">
    	<ul>
        	<li><a href="#">Startseite</a></li>
        	<li>
            	Steuerung 1
            	<ul>
                	<li><a href="#">Steuerung 1 - Link 1</a></li>
            	</ul>
        	</li>
        	<li>
            	Steuerung 2
            	<ul>
                	<li><a href="#">Steuerung 2 - Link 1</a></li>
            	</ul>
        	</li>
        	<li>
            	Steuerung 3
            	<ul>
                	<li><a href="#">Steuerung 3 - Link 1</a></li>
            	</ul>
        	</li>
    	</ul>
	</div>
</body>
</html>

Alles anzeigen

CSS

* {margin: 0; padding: 0;}




body {
	font: 100%/1.5 arial, sans-serif;
	background: #C0C0C0;
}
#menu {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	text-align: center;
}
#menu ul {
	float: left;
	list-style-type: none;
}
#menu ul li {
	float: left;
	min-width: 150px;
	width: auto;
	border: 1px solid #414141;
	border-left: 0;
	background: #30DEFF;
}
#menu ul li:first-child {
	border-left: 1px solid #000;
}
#menu a {
	display: block;
	color: #000;
	text-decoration: none;
}
#menu a:hover {
	color: #30DEFF;
	background: #000;
	border: 1px solid #30DEFF;
}
#menu li {position: relative;}




#menu ul ul {
	position: absolute;
	z-index: 2;
	margin-left: -9999px;
	margin-top: 1px;
}
#menu ul li:hover ul {
	display: block;
	margin-left: 0;
}
#menu ul ul li {
	border: 1px solid #000;
	margin-left: -1px;
	border-top : 0;
	padding: 0.2em 0;
	font-size: 0.6em;
}

Alles anzeigen

Allerdings habe ich dann das Problem, dass es bei ganz small gezogenem Browser. Übereinander aufklappt.

Habe mir nun alternativ doch mal den Ansatz mit jquery(http://webdesigntutsplus.s3.am…pdowns-21c7868/index.html) angesehen und tendiere doch eher hierzu. Habe es auch schon umgesetzt , bis auf paar Feinheiten

Was sagen Sie denn zu meinem eigens erstellten Menü Ansatz, siehe Codeabschnitte in diesem Beitrag, ist der nicht auch als Steuerung für ein responsives Design akzeptabel? Oder ist die jquery Lösung doch die bessere?

Basi · 21. Oktober 2013

Wie bereits erwähnt ist die beste Lösung ohne JavaScript (jQuery) die Nutzung von media queries, so wie es auf deiner Beispielseite auch der Fall ist:

CSS

@media screen and (max-width: 768px) {
    .active {
        display: block;
    }
    .nav > li {
        float: none;
    }
    .nav > li > .parent {
        background-position: 95% 50%;
    }
    .nav li li .parent {
        background-image: url("images/downArrow.png");
        background-repeat: no-repeat;
        background-position: 95% 50%;
    }
    .nav ul {
        display: block;
        width: 100%;
    }
   .nav > li.hover > ul , .nav li li.hover ul {
        position: static;
    }
}

Alles anzeigen

Matrox · 21. Oktober 2013

Jep...

script.js:

JavaScript

var ww = document.body.clientWidth;




$(document).ready(function() {
	$(".steuerung li a").each(function() {
		if ($(this).next().length > 0) {
			$(this).addClass("parent");
		};
	})




	$(".klickmich").click(function(e) {
		e.preventDefault();
		$(this).toggleClass("active");
		$(".steuerung").toggle();
	});
	adjustMenu();
})




$(window).bind('resize orientationchange', function() {
	ww = document.body.clientWidth;
	adjustMenu();
});




var adjustMenu = function() {
	if (ww < 768) {
		$(".klickmich").css("display", "inline-block");
		if (!$(".klickmich").hasClass("active")) {
			$(".steuerung").hide();
		} else {
			$(".steuerung").show();
		}
		$(".steuerung li").unbind('mouseenter mouseleave');
		$(".steuerung li a.parent").unbind('click').bind('click', function(e) {
			// must be attached to anchor element to prevent bubbling
			e.preventDefault();
			$(this).parent("li").toggleClass("hover");
		});
	}
	else if (ww >= 768) {
		$(".klickmich").css("display", "none");
		$(".steuerung").show();
		$(".steuerung li").removeClass("hover");
		$(".steuerung li a").unbind('click');
		$(".steuerung li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
		$(this).toggleClass('hover');
	   });
	}
}

Alles anzeigen

Ohne diese Zusätze funktioniert die Navigation von hier(http://webdesigntutsplus.s3.am…pdowns-21c7868/index.html) aber ned

Ich habe Javascript im Browser aber deaktiviert und trotzdem funktionieren die codes und die steuerung , bin etwas verwirrt

Basi · 21. Oktober 2013

Wir haben dir einen Ansatz gegeben, mit den media queries kannst du die Navi komplett so umschreiben das sie auch mit CSS funktioniert.

Keiner sagt "Kopier das dahin und alles klappt!"

Dropdown Navigation im liquiden Design erstellen

Jetzt mitmachen!

Teilen