SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2005
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Moving a underline marker smoothly between menu items

    On the http://ideaware.co/ site with the top nav the orange marker item underline moves (with a slight delay) smoothly as you hover over it.

    I can see the list item blob in the source, but how are they doing this and how could i do something similar? Are there any jquery libraries for this type of thing?

    <li class="blob" style="width: 35px; left: 0px; opacity: 1; overflow: hidden;"></li>

    Thanks in advance

  2. #2
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    734
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    did not have a lot of time to look at it.
    but here is a screenshot w/some interesting info.
    blob.jpg
    the orange bar is part of the same list as the links.
    it is positioned and has a z index. I think the smoothness of the movement can be achieved w/a css animation (translate?) but not sure that is actually used here.
    You can use google chrome and inspect element to see the code they used.
    And am sure more experience mentor/siteforum peeps will soon drop by and give you more complete advice.

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2005
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Still banging my head on this one Would it be worth moving to the javascript forum? Unfortunately i am not a javascript ninja, any pointers much appreciated, particularly if they are to a script that can do this for me!

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,535
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by g18c View Post
    Still banging my head on this one Would it be worth moving to the javascript forum? Unfortunately i am not a javascript ninja, any pointers much appreciated, particularly if they are to a script that can do this for me!
    Don't hurt yourself!
    If you disable JavaScript, you will see that the moving orange underline under the menu items disappears; so, yes, it is being done with JavaScript. @ralph.m might be able to point out the specific JavaScript doing this or move this post to the JS forum.

  5. #5
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    734
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    wouldn't css transitions work as well?

  6. #6
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    734
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    try this for some ideas
    http://www.youtube.com/watch?v=xetgON6bE9s
    am sure ronpat can also point you to so sitepoint tutorial/videos and i think sitepoint main page has some info on css animation.
    only possible prob. some older older browser might not support it

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The menus seems to be built from this tutorial although it looks as though the download files have been moved but you can grab them from the demo quite easily. It seems a lot of code for a small effect though.

    How about something simpler and just fading the border in?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    .nav {
    	margin:0;
    	padding:0;
    	list-style:none;
    	position:relative;
    	height:30px;
    }
    .nav li, .nav a {
    	float:left;
    	line-height:20px;
    	height:30px;
    	text-decoration:none;
    	color:#000;
    }
    .nav a {
    	width:100px;
    	text-align:center;
    	border-bottom:2px solid #000;
    	-webkit-transition: all .5s ease-in .2s;
    	-moz-transition: all .5s ease-in .2s;
    	transition: all .5s ease-in .2s;
    }
    .nav a:visited { color:#000 }
    .nav a:hover { border-color:orange }
    </style>
    </head>
    
    <body>
    <ul id="nav" class="nav">
    		<li><a href="#">Link 1</a></li>
    		<li><a href="#">Link 2</a></li>
    		<li><a href="#">Link 3</a></li>
    		<li><a href="#">Link 4</a></li>
    		<li><a href="#">Link 5</a></li>
    		<li><a href="#">Link 6</a></li>
    		<li><a href="#">Link 7</a></li>
    </ul>
    </body>
    </html>
    (As a matter of interest I did something similar in CSS abut 8 years ago but its not usable in a real situation.)

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    This is a little convoluted but works in IE10+

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    .nav {
    	margin:0;
    	padding:0;
    	list-style:none;
    	position:relative;
    	height:30px;
    }
    .nav li, .nav a {
    	float:left;
    	line-height:20px;
    	height:30px;
    	text-decoration:none;
    	color:#000;
    }
    .nav a {
    	width:100px;
    	text-align:center;
    }
    .nav a:visited { color:#000 }
    .nav li a { border-bottom:1px solid #000 }
    .nav li:last-child {
    	width:100px;
    	-webkit-transition: all .5s ease-in .2s;
    	-moz-transition: all .5s ease-in .2s;
    	transition: all .5s ease-in .2s;
    	position:absolute;
    	left:0;
    	width:100px;
    	bottom:-1px;
    	height:1px;
    	background:orange;
    	border:none;
    	padding:0;
    	float:none;
    	z-index:2;
    }
    .nav li:nth-child(2):hover + li + li + li + li + li + li { left:100px }
    .nav li:nth-child(3):hover + li + li + li + li + li { left:200px }
    .nav li:nth-child(4):hover + li + li + li + li { left:300px }
    .nav li:nth-child(5):hover + li + li + li { left:400px }
    .nav li:nth-child(6):hover + li + li { left:500px }
    .nav li:nth-child(7):hover + li { left:600px }
    </style>
    </head>
    
    <body>
    <h1>IE9+</h1>
    <ul id="nav" class="nav">
    		<li><a href="#">Link 1</a></li>
    		<li><a href="#">Link 2</a></li>
    		<li><a href="#">Link 3</a></li>
    		<li><a href="#">Link 4</a></li>
    		<li><a href="#">Link 5</a></li>
    		<li><a href="#">Link 6</a></li>
    		<li><a href="#">Link 7</a></li>
    		<li></li>
    </ul>
    </body>
    </html>
    Or with a little js we can make it persistent.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    .nav {
    	margin:0;
    	padding:0;
    	list-style:none;
    	position:relative;
    	height:30px;
    }
    .nav li, .nav a {
    	float:left;
    	line-height:20px;
    	height:30px;
    	text-decoration:none;
    	color:#000;
    }
    .nav a {
    	width:100px;
    	text-align:center;
    }
    .nav a:visited { color:#000 }
    .nav li a { border-bottom:1px solid #000 }
    .nav li:last-child {
    	width:100px;
    	-webkit-transition: all .5s ease-in .2s;
    	-moz-transition: all .5s ease-in .2s;
    	transition: all .5s ease-in .2s;
    	position:absolute;
    	left:0;
    	width:100px;
    	bottom:-1px;
    	height:1px;
    	background:orange;
    	border:none;
    	padding:0;
    	float:none;
    	z-index:2;
    }
    .nav li:nth-child(2):hover + li + li + li + li + li + li { left:100px }
    .nav li:nth-child(3):hover + li + li + li + li + li { left:200px }
    .nav li:nth-child(4):hover + li + li + li + li { left:300px }
    .nav li:nth-child(5):hover + li + li + li { left:400px }
    .nav li:nth-child(6):hover + li + li { left:500px }
    .nav li:nth-child(7):hover + li { left:600px }
    
    .nav li:nth-child(2).over + li + li + li + li + li + li { left:100px }
    .nav li:nth-child(3).over + li + li + li + li + li { left:200px }
    .nav li:nth-child(4).over + li + li + li + li { left:300px }
    .nav li:nth-child(5).over + li + li + li { left:400px }
    .nav li:nth-child(6).over + li + li { left:500px }
    .nav li:nth-child(7).over + li { left:600px }
    
    </style>
    </head>
    
    <body>
    <h1>IE9+</h1>
    <ul id="nav" class="nav">
    		<li><a href="#">Link 1</a></li>
    		<li><a href="#">Link 2</a></li>
    		<li><a href="#">Link 3</a></li>
    		<li><a href="#">Link 4</a></li>
    		<li><a href="#">Link 5</a></li>
    		<li><a href="#">Link 6</a></li>
    		<li><a href="#">Link 7</a></li>
    		<li></li>
    </ul>
    <script type="text/javascript">
    <!--//--><![CDATA[//><!--
    startList = function() {
    	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    	for (var i=0; i<sfEls.length; i++) {
    		sfEls[i].onmouseover=function() {
    			//first remove all existing classes of .over
    			for (var j=0; j<sfEls.length; j++){
    				sfEls[j].className=sfEls[j].className.replace(new RegExp(" over\\b"), "");
    			}
    				this.className+=" over";// now add class
    		}
    	}
    }
    // addLoadEvent 
    function addLoadEvent(func) {
      var oldonload = window.onload;
      if (typeof window.onload != 'function') {
        window.onload = func;
      } else {
        window.onload = function() {
          if (oldonload) {
            oldonload();
          }
          func();
        }
      }
    }
    addLoadEvent(startList);
    //--><!]]>
    </script>
    
    </body>
    </html>

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Here's all the code from the tutorial I pointed to stripped out and turned into a border demo for you.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>untitled</title>
    <style type="text/css">
    #container {
    	width: 1200px;
    	margin: 100px auto;
    }
    ul, li {
    	margin: 0;
    	padding: 0;
    }
    #nav {
    	position: relative;
    	float: left;
    }
    #nav li {
    	float: left;
    	list-style: none;
    	border-bottom: 1px solid #000;
    }
    #nav li a {
    	color: #000;
    	position: relative;
    	z-index: 2;
    	float: left;
    	font-size: 30px;
    	font-family: helvetica, arial, sans-serif;
    	text-decoration: none;
    	padding: 30px 45px;
    }
    #nav #blob {
    	position: absolute;
    	bottom: 0px;
    	z-index : 1;
    	height:1px;
    	background:orange;
    	border:none;
    }
    </style>
    </head>
    <body>
    <div id="container">
    		<ul id="nav">
    				<li id="selected"><a href="#">Home</a></li>
    				<li><a href="#">About</a></li>
    				<li><a href="#">Blog</a></li>
    				<li><a href="#">More About My Portfolio</a></li>
    				<li><a href="#">Contact</a></li>
    		</ul>
    </div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> 
    <script type="text/javascript">
    (function($) {
    
    	$.fn.spasticNav = function(options) {
    	
    		options = $.extend({
    			overlap : 20,
    			speed : 500,
    			reset : 1500,
    			color : '#0b2b61',
    			easing : 'easeOutExpo'
    		}, options);
    	
    		return this.each(function() {
    		
    		 	var nav = $(this),
    		 		currentPageItem = $('#selected', nav),
    		 		blob,
    		 		reset;
    		 		
    		 	$('<li id="blob"></li>').css({
    		 		width : currentPageItem.outerWidth(),
    		 		left : currentPageItem.position().left
    		 	}).appendTo(this);
    		 	
    		 	blob = $('#blob', nav);
    					 	
    			$('li:not(#blob)', nav).hover(function() {
    				// mouse over
    				clearTimeout(reset);
    				blob.animate(
    					{
    						left : $(this).position().left,
    						width : $(this).width()
    					},
    					{
    						duration : options.speed,
    						easing : options.easing,
    						queue : false
    					}
    				);
    			}, function() {
    				// mouse out	
    				reset = setTimeout(function() {
    					blob.animate({
    						width : currentPageItem.outerWidth(),
    						left : currentPageItem.position().left
    					}, options.speed)
    				}, options.reset);
    				
    			});
    		 
    		
    		}); // end each
    	
    	};
    
    })(jQuery);
    
    </script> 
    <script type="text/javascript">
    $('#nav').spasticNav();
    </script>
    </body>
    </html>

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Thread moved to JS forum for expert advice


Bookmarks

Posting Permissions

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