2 kostenlose CSS-Menüs auf Line25.com

2 coole und kostenlose CSS-Menüs von Cris Spooner

2 Free CSS  Menus von Line25.com

Auf der Webseite von Line25.com habe ich 2 interessante Anleitungen zur Erstellung von kostenlosen CSS-Menüs entdeckt. Der Betreiber der Webseite, Cris Spooner, stellt dabei in der Rubrik Tutorials tolle und leicht verständliche Anleitungen für Webdesigner und CSS-Fans vor.

Ich möchte Ihnen 2 kostenlose CSS-Menüs von dieser Webseite vorstellen und hier im Blog zum gratis Download anbieten.

1) Free Pure CSS Drop-Down Menu

Tutorial: How To Create a Pure CSS Dropdown Menu

Pure CSS Dropdown Menu

Demo ansehen / Download Dropdown Menü (Zip-Datei: 5KB)

Um Ihnen den Aufbau des Dropdown-Menüs zu zeigen, folgen nachstehend die HTML-Anweisungen und die CSS-Formatierung.

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS Dropdown Menu</title>

<link href="style.css" rel="stylesheet" />

</head>
<body>

<nav>
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">Tutorials</a>
			<ul>
				<li><a href="#">Photoshop</a></li>
				<li><a href="#">Illustrator</a></li>
				<li><a href="#">Web Design</a>
					<ul>
						<li><a href="#">HTML</a></li>
						<li><a href="#">CSS</a></li>
					</ul>
				</li>
			</ul>
		</li>
		<li><a href="#">Articles</a>
			<ul>
				<li><a href="#">Web Design</a></li>
				<li><a href="#">User Experience</a></li>
			</ul>
		</li>
		<li><a href="#">Inspiration</a></li>
	</ul>
</nav>

</body>
</html>

CSS

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, 
dl, dt, dd, img, form, fieldset, input, textarea, 
blockquote {
margin: 0; padding: 0; border: 0;
}

body {
background: #909eab url(bg.png);
font-family: Helvetica, sans-serif; 
font-size: 18px; 
line-height: 24px;
}

nav {
margin: 100px auto; 
text-align: center;
}

nav ul ul {
display: none;
}

nav ul li:hover > ul {
display: block;
}

nav ul {
background: #efefef; 
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);  
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius: 10px;  
list-style: none;
position: relative;
display: inline-table;
}

nav ul:after {
content: ""; clear: both; display: block;
}

nav ul li {
float: left;
}

nav ul li:hover {
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}

nav ul li:hover a {
color: #fff;
}

nav ul li a {
display: block; padding: 25px 40px;
color: #757575; text-decoration: none;
}

nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none; 
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a; position: relative;
}

nav ul ul li a {
padding: 15px 40px;
color: #fff;
}	

nav ul ul li a:hover {
background: #4b545f;
}

nav ul ul ul {
position: absolute; left: 100%; top:0;
}

2) Free CSS Dark Menu

Tutorial: Create a Dark Navigation Menu Design with CSS

Free Dark CSS Menu

Demo ansehen / Download Dark CSS Menü (Zip-Datei: 12KB)

So sehen in diesem Beispiel die CSS-Formatierungen und die HTML-Anweisungen aus:

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Dark sleek menu design</title>

<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>

<ul id="menu">
	<li><a href="#">Home</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Contact</a></li>
</ul>

</body>
</html>

CSS

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, 
dl, dt, dd, img, form, fieldset, input, textarea, 
blockquote {
margin: 0; padding: 0; border: 0;
}

body {
background: #000 url(images/bg.png);
padding: 200px 0;
}

#menu {
width: 612px; 
height: 73px; 
padding: 16px 0 0 0; 
margin: 0 auto;
background: url(images/menu-bg.png);
}

#menu li {
list-style: none; float: left; margin: 0 12px;
}

#menu li:first-child {
margin-left: 19px;
}

#menu li a {
display: block; 
width: 176px; 
height: 37px; 
padding: 20px 0 0 0;
background: url(images/btn.png) top no-repeat;
font: bold 18px Helvetica, Arial, Sans-serif;
text-shadow: 0 -1px #1d1d1d;
color: #767676;
text-align: center; 
text-decoration: none;
}

#menu li a:hover, #menu li a:focus {
color: #dcdcdc;
}

#menu li a:active {
background: url(images/btn.png) bottom no-repeat;
color: #767676;
}

a { outline: none; }
Tweet about this on TwitterShare on Google+0Share on Facebook0Email this to someone

Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *