Menu #4
- 94+
- 94+
- 88+
- 80+
- 5.1+
- 94+
- 88+
- 14+
- 5+
- 1+
- 94+
- 3.08 KB
- HTML, CSS
- Menu
- horizontal
- MIT License
<ul class="nav">
<li><a href="#">Home</a></li>
<li class="active"><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
body {
font: 13px/20px "Lucida Grande", Tahoma, Verdana, sans-serif;
color: #404040;
}
.nav {
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: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.08)), to(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);
-moz-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: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.2)), to(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);
-moz-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;
}
The code snippet we’re diving into today crafts a sleek, horizontal menu, a common feature in many websites that guides users through different sections. This menu is created using HTML and styled with CSS, which are the backbone of web design and development.
In the HTML part, we see a list <ul> with the class “nav,” where each item <li> represents a different section of the website. These items are made clickable through the use of anchor tags <a>, making navigation smooth and intuitive. The structure is simple yet effective, serving as the skeleton for what becomes a visually appealing navigation bar.
The real magic happens in the CSS, where the menu’s visual appearance is defined. The .nav class is styled to display its items inline, creating that horizontal layout we’re talking about. Each list item receives styles like padding, font size, and color, ensuring the menu is not only functional but also fits the website’s aesthetic. Special effects, such as a change in color and shadow on hover, are applied to make the menu interactive and responsive to user actions. The use of gradients, shadows, and text styling adds depth and sophistication to the design.
What we have, in essence, is a horizontal menu that’s not only easy to navigate but also pleasing to the eye. Through the combination of HTML and CSS, this code snippet achieves a balance between functionality and style, making any website more engaging and user-friendly.
