Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3
  1. #1
    Junior Member
    Join Date
    Mar 2015
    Posts
    5
    Member #
    47889

    Adding arrows to Navigation Menus

    I have a vertical navigation menu, this is a jquery menu with an accordion affect(this probably doesn't pertain to the question, but at least you know what all the mess is. I simply want to add an arrow image to the left side of the main menu lines(not the sub menus). There are also main parts of the menu that will be direct links and not have sub menus, so these will not have the arrow.
    So below is the html and on this line <h3><span class="arrow"></span>Menu with sub items</h3> I want an arrow.

    HTML Code:
    <div id="accordion">
    	<ul>
    		<li>
    			<h3><span class="arrow"></span>Menu with sub items</h3>
    			<ul>
    				<li><a href="#">a</a></li>
    				<li><a href="#">b</a></li>
    				<li><a href="#">c</a></li>
    				<li><a href="#">d</a></li>
    				<li><a href="#">e</a></li>
    				<li><a href="#">f</a></li>
    				<li><a href="#">g</a></li>
    				<li><a href="#">h</a></li>
    			</ul>
    		</li>
    		
    		<li>
    			<h3><a href="#">Menu with no sub</a></h3>
    		</li>
    		
    	</ul>
    </div>


    Here is the CSS
    Code:
    #accordion h3 {
    color: #c2c4c4;
    font-size: 20px;
    line-height: 60px;
    padding: 0 10px;
    cursor: pointer;
    /*fallback for browsers not supporting gradients*/
    background: #383D3F; 
    /*background: linear-gradient(#383D3F, #4f5355)*/
    border-bottom: #a7a7a7 thin solid;
    text-align:left;
    }
    /*heading hover effect*/
    #accordion h3:hover {
    color: #E9E9E9;
    
    }
    /*HERE IS WHERE I AM TRYING TO ADD THE ARROW*/
       #accordian h3 span{
    	font-size: 16px;
    	margin-right: 10px;
    	background-image:url("http://www.webdesignforums.net/forum/images/green-arrow.png");
        background-repeat: no-repeat;
        background-position: left;
     }
    
     /*list items*/
     #accordion li {
     list-style-type: none;
      }
      /*links*/
     #accordion ul ul li a {
    color: white;
    text-decoration: none;
    font-size: 16px;
    line-height: 40px;
    display: block;
    padding: 0 15px;
    /*transition for smooth hover animation*/
    transition: all 0.15s;
    border-bottom:#c2c4c4 thin solid;
    }
     /*hover effect on links*/
    #accordion ul ul li a:hover {
    background: #E9E9E9;
    }
    /*Lets hide the non active LIs by default*/
    #accordion ul ul {
    display: none;
    }
    #accordion li.active ul {
    display: block;
    }
    Thanks

  2.  

  3. #2
    Member
    Join Date
    Oct 2010
    Location
    Philadelphia
    Posts
    82
    Member #
    24186
    Liked
    8 times
    Code:
    #accordian h3:before {
         content: "%link to png%";
         font-size:16px;
         margin-right:10px;
    }

  4. #3
    Junior Member
    Join Date
    Mar 2015
    Posts
    5
    Member #
    47889
    Thank you very much! Worked like a charm!


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 06:23 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com