How to Style the Navigation With CSS – an Easy-to-Read Guide
The navigation menu is a key feature required for nearly every website to function. It helps visitors find their way around the site and get to the content they want quickly. A well designed navigation not only improves the user experience, but is also essential for Search Engine Optimization. In this guide, we will discuss how to create a simple yet attractive navigation using CSS.
Basics for Building a Navigation Menu
CSS makes it possible to style and position HTML elements in a visually attractive way. The navigation is usually a List of Links. These Links are defined with HTML and can be styled using CSS. An intuitive navigation is crucial for a good user experience and ensures that visitors find quickly their way around the website.
The basic structure of the navigation is usually created in the same way. It is usually defined as an Unorderd List of web page links. This ensures the semantically correct presentation of links. Modern websites usually use a combination of HTML and CSS to create an attractive navigation.
Removing the Bullet Points and Adjusting Spacing
By default, the unordered list (UL list) has a specific style. The list has a Margin of 1em at the top and bottom and an indent of 40px at the left.
The default properties of UL are not suitable for a navigation bar and must be adjusted:
Default settings of UL for the navigation
nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}
Fundamental Styling Techniques for the Navigation
Navigation design is essential for the user friendliness of a website. A well-designed navigation should be clear, well-structured, and easy to use. The use of Color, the arrangement of elements, and the legibility of fonts play a crucial role.
Style a simple vertical navigation bar
/* Navigation Styling */
nav ul {
margin: 0;
padding: 0;
width: 12em;
list-style-type: none;
background: #cccccc;
}
nav li a {
display: block;
padding: 0.5em 0.25em;
text-decoration: none;
color: #000000;
}
nav li a:hover {
background: #dd0000;
color: #ffffff;
}
Create a simple vertical navigation
<h2>A simple navigation</h2>
<nav>
<ul>
<li><a href="#">Link Text #1</a></li>
<li><a href="#">Link Text #2</a></li>
<li><a href="#">Link Text #3</a></li>
<li><a href="#">Link Text #4</a></li>
</ul>
</nav>
In this example, we use the hash character # as value for the href attribute instead of real URLs. For a real navigation, the URL of a web page or an Anchor Link, to a jump mark must be specified for href.
An attractive navigation needs to be clearly visible and stand out from the rest of the page's content. To ensure that the website can be used with a smartphone, it is important to make sure that the spaces between the links are large enough.
More Options for Styling the Navigation
A subtle shadow can make the navigation stand out visually from the content and create a 3D effect. This not only improves the readability, but also the visual hierarchy of the web page.
Style a vertical navigation bar with 3D effect
/* Navigation Styling with 3D Effect */
nav ul {
margin: 0;
padding: 0;
width: 12em;
list-style-type: none;
background: #cccccc;
border: thin solid #444444;
border-radius: 0.5em;
box-shadow: 4px 4px 4px #444444 inset, 6px 6px 6px #999999;
}
nav li a {
display: block;
padding: 0.5em 0.25em 0.5em 0.5em;
text-decoration: none;
color: #000000;
}
nav li a:hover {
background: #dd0000;
color: #ffffff;
}
Create a vertical navigation with 3D effect
<h2>Vertical Navigation with 3D Effect</h2>
<nav>
<ul>
<li><a href="#">Link Text #1</a></li>
<li><a href="#">Link Text #2</a></li>
<li><a href="#">Link Text #3</a></li>
<li><a href="#">Link Text #4</a></li>
</ul>
</nav>
Conclusion
Styling the navigation with CSS is an essential part of web design. With the right technique, a visually appealing and functional navigation can be created that significantly improves the user experience. Aspects such as legibility, harmony of colors and spacing play a important role.
By using CSS styles, you can achieve a variety of effects that make your navigation visually more attractive. Understanding the basics of creating navigations can help you create structured and user-friendly navigations that greatly improve the user experience of your entire website.
With these basics in mind, you are well prepared to create an attractive navigation that is visually appealing and works well in practice.