Scribd
Upload
42 views

Cool CSS Menu - Live Editable Example

The document provides code for a live editable CSS menu. It includes HTML markup for an unordered list with list items for menu links. The CSS styles the menu with properties for fonts, colors, positioning, shadows, and hovers to create a styled navigation menu. On hover, the text color changes and a text shadow is added. Active menu items are given a different color, shadow, and positioned at the top with a border. Links within are block elements styled for consistent line height, padding, and without underlines.

Uploaded by

wasim ahmed
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
42 views

Cool CSS Menu - Live Editable Example

The document provides code for a live editable CSS menu. It includes HTML markup for an unordered list with list items for menu links. The CSS styles the menu with properties for fonts, colors, positioning, shadows, and hovers to create a styled navigation menu. On hover, the text color changes and a text shadow is added. Active menu items are given a different color, shadow, and positioned at the top with a border. Links within are block elements styled for consistent line height, padding, and without underlines.

Uploaded by

wasim ahmed
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

Cool CSS menu Live Editable

example
HTML:
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li class="active"><a href="#">Fivera.net</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
CSS:
body {
font: 13px/20px 'Lucida Grande', Tahoma, Verdana, sans-serif;
color:#124578;
background: #303335;
}
.nav {
margin-top:94px;
height: 48px;
display: inline-block;
list-style: none;
}
.nav li, .active {
float: left;
position: relative;
margin: 0 0 4px;
height: 44px;
color: #ccc;
text-shadow: 0 1px rgba(0, 0, 0, 0.9);
background-color: rgba(0, 0, 0, 0.05);
border: 1px solid #232428;
border-bottom-color: #1f2326;
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.08),
rgba(255, 255, 255, 0));

background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.08), rgba(255,


255, 255, 0));
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.08), rgba(255,
255, 255, 0));
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.08), rgba(255,
255, 255, 0));
-webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 2px #262a2e, 0
3px #1f2326, 0 4px 3px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 2px #262a2e, 0 3px
#1f2326, 0 4px 3px rgba(0, 0, 0, 0.2);
}
.nav li:hover {
color: #b0d157;
text-shadow: 0 1px black, 0 0 20px rgba(255, 255, 255, 0.5);
}
.nav li.active,
.nav .active:active,
.nav li:active {
z-index: 2;
margin: 4px 0 0;
height: 43px;
color: #aaa;
text-shadow: 0 1px black;
background-color: rgba(255, 255, 255, 0.03);
border-color: #212425;
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -1px 1px
rgba(0, 0, 0, 0.15), 1px 0 rgba(0, 0, 0, 0.05), -1px 0 rgba(0, 0, 0, 0.05), 0 1px
rgba(255, 255, 255, 0.05);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -1px 1px rgba(0, 0, 0,
0.15), 1px 0 rgba(0, 0, 0, 0.05), -1px 0 rgba(0, 0, 0, 0.05), 0 1px rgba(255, 255, 255,
0.05);
}
.nav li a {
display: block;
line-height: 44px;
padding: 0 20px;
font-size: 12px;
font-weight: bold;
color: inherit;
text-decoration: none;

outline: 0;
}

Home
About
Fivera.net
Portfolio
Contact
Output: http://codepen.io/anon/pen/rxGFd

You might also like