-
1. Re: How do I create a vertical side menu with its own styling separate from the horizontal bar above it?
Nancy O. Nov 25, 2013 2:52 PM (in response to Noradc)Hi Nora,
If you use HTML5 <nav> tags, give them each a unique ID name.
<nav id="top">
YOUR HORIZONTAL MENU HERE
</nav>
<nav id="side">
YOUR VERTICAL MENU HERE
</nav>
Do the same thing with your CSS selectors.
#top nav {horizontal styles here...}
#side nav {vertical styles here...}
NOTE: I'm suggesting IDs instead of classes here because IDs carry more weight in the CSS cascade. If you intend to use more than two <nav> sets per page, you might want to use classes instead of IDs.
Nancy O.
-
2. Re: How do I create a vertical side menu with its own styling separate from the horizontal bar above it?
Noradc Nov 25, 2013 6:57 PM (in response to Nancy O.)Hello Nancy O. The information that you gave was very helpful. By applying it I was able to create a vertical menu with a text alignment to the left. The background is black with white letters. And when the mouse hovers over the words, the color of the letters turn gray. Just as I wanted. Now I am trying to figure out how to make the arrow of the mouse turn into a hand only as it hovers over the words rather than over the entire width of the block or box. As the mouse moves away from the words in the vertical menu, the mouse continues to be in the shape of a hand until it no longer is over the black background. Would you know how to change this? Adjusting the width of the a:link only shortens the link area that is clickable. The words that are shorter in the side menu still have more area where the mouse continues to be in the shape of a hand rather than an arrow. Thank you.
Nora.
-
3. Re: How do I create a vertical side menu with its own styling separate from the horizontal bar above it?
Nancy O. Nov 25, 2013 7:34 PM (in response to Noradc)Post a link to your page so we can look at your CSS code.
N
-
4. Re: How do I create a vertical side menu with its own styling separate from the horizontal bar above it?
Noradc Nov 25, 2013 8:07 PM (in response to Nancy O.)I can post a link to the page. But I will need to upload it. It will take a day to show. But after I wrote to you. I began working with creating additional a:link styles. I was able to create a shortened clickable area of one the words in the vertical menu. Your advice reinforced what I have learned. The following code shows that I started to make different styles of the a:link for each word on the vertical menu. I think that this will work. To indicate the different a:link style I used bold letters . Thank you very much.
html:
<div class="side_menu_nav">
<ul class="side_menu">
<li class="side_menu"><a href="still image.html">STILL IMAGE</a></li>
<li class="side_menu_video"> <a href="video.html">VIDEO</a></li>
<li class="side_menu" ><a href="animation.html">ANIMATION</a></li>
<li class="side_menu" ><a href="website.html">WEBSITE</a></li>
</ul>
</div>CSS:
.side_menu_nav {
margin-top: 100px;
width: 190px;
height: 230px;
background-color: #F63;
font-size: 18.5px;
z-index: 5;
font-family: Arial, Helvetica, sans-serif;
}side_menu ul {
list-style-type: none;
padding-left: 10px;}
side_menu li {
display: list-item;}
.side_menu a:link {
text-align: left;
color: #FFF;
background-color: #000;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
width: 190px;
margin-top: 15px;
margin-left: 15px;
margin-right: 0px;
text-decoration: none;
width: 120px;
}
.side_menu_video a:link {
text-align: left;
color: #FFF;
background-color: #000;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
width: 65px;
margin-top: 15px;
margin-left: 15px;
margin-right: 0px;
text-decoration: none;
}
.side_menu a:visited {
color: #FFF;
background-color: #000;
}
.side_menu a:hover {
color: #CCC;
}
.side_menu a:active {
color: #000;/*text*/
}


