Creating a navigation menu can be done using HTML and CSS. Here's a simple example of how to create a navigation menu:
[justify]HTML:[/justify] [html]<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>[/html] CSS (styles.css): [html].menu {
background-color: #333;
padding: 10px 0;
}
ul {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
li {
display: inline;
margin: 0 20px;
}
a {
text-decoration: none;
color: #fff;
font-weight: bold;
font-size: 18px;
}
a:hover {
color: #ff7f00;
}[/html] This code creates a simple horizontal navigation menu with a hover effect. You can customize the menu items, styles, and links to fit your specific design.
[ul]in the CSS: [li]The menu has a background color of '#333' and padding.[/li][li]The list ('ul') is styled to remove bullet points and center the menu items.[/li][li]Menu items ('li') are displayed inline with margins between them.[/li][li]Links ('a') have text decoration removed and are styled with white color. The hover effect changes the link color to '#ff7f00'.[/li][/ul] You can also expand and customize this code further to create a more complex navigation menu with dropdowns or additional features as needed for your website.
Share This Thread:
[How To?] How to create a simple navigation menu |