Creating a Menu with CSS
We can create very different and beautiful menus by formatting unordered lists (ul tags) with CSS. For example, lists created with ul tags can be converted to vertical menus, horizontal menus, and drop-down menus.
It is quite easy to convert a list created with ul and li tags into a vertical menu. In the previous topic (List Properties), a menu was obtained by formatting the list properties.
A simple vertical menu is created at the bottom. If we explain some codes in this example;
ul#links li { } The styles specified here will be applied to the li tags inside the ul tag named links. Other li tags will not be affected by these styles.
ul#links li a { } Used to format the a tags in the ul, in the li, given the links id.
ul#links li:hover { } The styles specified here will be applied to the hovered li tags inside the ul tag named links.
ul#links li a:hover { } It is used to set how the a tags in the ul, in the li, with the links id will appear when hovered over them.
Note: ul#links li expression and #links li expression will work the same.
Example: In the example below, the class named solList has been applied to the ul tag.
Html Section:
<ul class="leftList">
<li><a href="#">History of Istanbul</a></li>
<li><a href="#">Important Places</a></li>
<li><a href="#">Districts</a></li>
<li><a href="#">Bosphorus</a></li>
</ul>
Css Part:
.leftList {
padding: 0px;
width: 200px;
list-style-type:none; /* remove the bullet */
margin-top: 20px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.leftList a {
display:block; /* description below */
background-color: #CF9;
width:155px;
padding-top: 5px;
padding-bottom: 5px;
text-decoration: none;
font-weight: bold;
color: #0080C0;
padding-left: 30px;
padding-right: 5px;
margin-top: 3px;
margin-bottom: 3px;
margin-left: 3px;
margin-right: 3px;
border: 2px solid #CF9;
}
.leftList a:hover {
color: #F60;
border: 2px dashed #F60;
}
Note: This is because the display: block property is applied to the a tag: when we apply background color to the "a" tag, width will look different in all of them
. Because the "a" tag is an inline element and the more space it occupies, the wider it will be. In order to equalize the widths of the a tags in each row, we need to give them widths. However, since width cannot be given to inline elements, first of all, "a" tags must be converted to block elements. Then we can make the width of all a tags equal by applying width.
creating menu with css, creating a menu with ul li tags, equalizing the width of a tags, making a css vertical menu
EXERCISES
.leftListe2{
background-color: #CF9;
padding: 0px;
width: 196px;
border: 2px solid #0080C0;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
list-style-type: none;
}
.leftListe2 li a{
display: block;
color: #0080C0;
text-decoration: none;
margin: 0px;
width: 161px;
padding-top: 7px;
padding-right: 5px;
padding-bottom: 7px;
padding-left: 30px;
font-weight: bold;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.leftListe2 li a:hover{
color: #FFF;
background-color: #0080C0;
}
Read 604 times.