4 Replies Latest reply: Nov 25, 2013 8:07 PM by Noradc RSS

    How do I create a vertical side menu with its own styling separate from the horizontal bar above it?

    Noradc Community Member

      Hello.  I need assistance in styling my side menu.  I would like for it to  have a different style than the horizontal bar that is above it.  I would like that the side menu have a black background and with white text vertically aligned to the left.  But I would also like that the mouse's arrow to turn into a hand when it touches the letters instead of during the entire width of the background.  When I began styling the text, everything aligned fine until I added the links in html code.  When I added the <a> tag and created a link to another page, the text goes from the left to the center of the black box.  And the entire width is a link rather than just the words.  To correct this, I tried renaming the div tag containg the menu.  I tried renaming the ul tag.  And I tried renaming the li tag and changing the declarations.  None of these ideas worked.  I thought about changing the <a> tag in the head of the document, but that didn't change the styling either.  I also tried creating the black background by inserting a black box as a background image with the links over top of the image.  It didn't work.  I would appreciate your assistance.   I will supply the coding if anyone is interested in looking at it.  Thank you.

       

      Nora.


         
         

        • 1. Re: How do I create a vertical side menu with its own styling separate from the horizontal bar above it?
          Nancy O. CommunityMVP

          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 Community Member

            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. CommunityMVP

              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 Community Member

                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*/
                   
                }