Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    May 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    JavaScript Menu Active Indicator

    Hello All,

    I'm new here and not an advanced JavaScript programmer, I'm trying to get a menu such as on the following website: http://www.hha.no/

    Note the arrow that is diaplayed under the active menu link, and follows the mouse depending on which menu like is hovered on.

    Following is my code:

    Code:
    HTML:
    
    <div id="wrapper">
    	<div id="banner">
    		<div id="logo">
    			<p><img src="images/logo4.png" height="200px" alt="" /></p>
    		</div>
    	</div>
    	<div id="header">
    			<ul id="main-menu">
    				<li class="current_page_item"><a href="#" accesskey="1" title="">Home</a></li>
    				<li><a href="#" accesskey="2" title="">About Us</a></li>
    				<li><a href="#" accesskey="3" title="">Services</a></li>
    				<li><a href="#" accesskey="4" title="">Photo Gallery</a></li>
    				<li><a href="#" accesskey="5" title="">Contact Us</a></li>
    			</ul>
    	</div>	
    	<div id="main-menu-indicator" style="left: 400px;"></div>
    Code:
    CSS
    
    #header
    {
    	margin: 0px auto;
    	width: 900px;
    	border: 3px solid #7D7D7D;
    	text-align:center;
    	list-style-type: none;
    	padding: 13px 0px 0px 0px;
    	overflow: hidden;
    }	
    
    #header ul
    {
    	text-align: center; 
    }
    
    #header ul li
    {
    	display: inline;
    	padding: 0px 60px 0px 0px;
    }
    
    #header a
    {
    	margin-left: 1px;
    	padding: 0px 0px 0px 0px;
    	letter-spacing: 1px;
    	text-decoration: none;
    	text-align: center;
    	text-transform: uppercase;
    	font-family: 'Oswald', sans-serif;
    	font-size: 16px;
    	font-weight: 300;
    	color: #000000;
    }
    
    #header a:hover, #header .current_page_item a
    {
    	text-decoration: none;
    	border-radius: 5px;
    	color: #f57e20;
    }
    
    #main-menu-indicator {
    	width: 20px;
    	height: 9px;
    	position: absolute;
    	background: url('images/icon-page-indicator.png') no-repeat bottom;
    }
    If anyone has seen any jQuery plugins they can reccomend, or let me know what I need to do that would be greatly appreciated... Currently my arrow image (main-menu-indicator div) sits in one spot, so if the page is resized it doesnt stick with the right menu item...

    Thanks


  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,303
    Thanks
    23
    Thanked 612 Times in 611 Posts
    Not sure how it was done originally and I think this could have been done in css, but I already had a jquery method in mind when i started.

    I removed the padding for header. To make things look better.
    I placed the <div id="header"> and the <div id="main-menu-indicator"> inside another div. Did not name it so used inline styling:
    <div style="margin: 0px auto;width: 900px;">
    Because of that I removed those rules from the header. Changed absolute to relative for class #main-menu-indicator and gave it a starting left position.

    You need to figure out out to rid the HOME of being red and how to follow up on each of the other pages.

    The code:
    Code:
    <!DOCTYPE html>
    <html dir="ltr" lang="en-US">
    <head>
    <style>
    #header
    {
    //margin: 0px auto;
    //width: 900px;
    	border: 3px solid #7D7D7D;
    	text-align:center;
    	list-style-type: none;
    //padding: 13px 0px 0px 0px;
    	overflow: hidden;
    }
    
    #header ul
    {
    	text-align: center;
    }
    
    #header ul li
    {
    	display: inline;
    	padding: 0px 60px 0px 0px;
    }
    
    #header a
    {
    	margin-left: 1px;
    	padding: 0px 0px 0px 0px;
    	letter-spacing: 1px;
    	text-decoration: none;
    	text-align: center;
    	text-transform: uppercase;
    	font-family: 'Oswald', sans-serif;
    	font-size: 16px;
    	font-weight: 300;
    	color: #000000;
    }
    
    #header a:hover, #header .current_page_item a
    {
    	text-decoration: none;
    	border-radius: 5px;
    	color: #f57e20;
    }
    
    #main-menu-indicator {
    	width: 20px;
    	height: 9px;
    //position: absolute;
    position: relative;
    left: 85px;
    	background: url('http://www.hha.no/img/icon-page-indicator.png') no-repeat bottom;
    }
    </style>
    </head>
    
    <body>
    <div id="wrapper">
    	<div id="banner">
    		<div id="logo">
    			<p><img src="images/logo4.png" height="200px" alt=""></p>
    		</div>
    	</div>
    	<div style="margin: 0px auto;width: 900px;">
    	<div id="header">
    			<ul id="main-menu">
    				<li class="current_page_item"><a href="#" accesskey="1" title="" class="tsg1">Home</a></li>
    				<li><a href="#" accesskey="2" title="" class="tsg1">About Us</a></li>
    				<li><a href="#" accesskey="3" title="" class="tsg1">Services</a></li>
    				<li><a href="#" accesskey="4" title="" class="tsg1">Photo Gallery</a></li>
    				<li><a href="#" accesskey="5" title="" class="tsg1">Contact Us</a></li>
    			</ul>
    	</div>
    	<div id="main-menu-indicator"></div>
    	</div>
    </div>
    
    <script type='text/javascript' src='javascript/jquery.js'></script>  //MINE GET YOUR OWN JQUERY -- CHANGE THIS
    <script type="text/javascript">
    $(document).ready(function(){
    	$(".tsg1").hover(function(){
    		switch(this.innerHTML)
    		{
    		case "Home":
    		$("#main-menu-indicator").css("left","85px");
    		break;
    		case "About Us":
    		$("#main-menu-indicator").css("left","225px");
    		break;
    		case "Services":
    		$("#main-menu-indicator").css("left","380px");
    		break;
    		case "Photo Gallery":
    		$("#main-menu-indicator").css("left","564px");
    		break;
    		case "Contact Us":
    		$("#main-menu-indicator").css("left","756px");
    		break;
    		default:
    		$("#main-menu-indicator").css("left","85px");
    		}
    	});
    });
    </script>
    </body>
    </html>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •