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 :slight_smile:

did not have a lot of time to look at it.
but here is a screenshot w/some interesting info.

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.

Still banging my head on this one :slight_smile: 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! :slight_smile:
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.

wouldn’t css transitions work as well?

try this for some ideas

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

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 [URL=“http://nettuts.s3.amazonaws.com/600_spasticNav/index.html”]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?


<!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.)

This is a little convoluted but works in IE10+


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


<!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>

Here’s all the code from the tutorial I pointed to stripped out and turned into a border demo for you.


<!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>

Thread moved to JS forum for expert advice :slight_smile: