.Centering absolutely positioned div based on parent's width (Jquery)
I am building a navigation bar that has a tiny arrow on the active tab (see attached picture)
DESIRED LOOK
The navigation bar is dynamically created based on my wordpress pages. The problem I am having is centering the little arrow on the active tab.
Currently, I am using jquery to place span tags after the current/active link.
$('li.current-menu-item a').after('<span></span>');
and my css is as follows:
#menu-nav{float:right; clear:right; margin-top:30px;font-family:'Arvo'}
#menu-nav li{margin: 0 10px; float:left; }
#menu-nav a{color:#9c9c98;padding:6px 9px; font-size:17px; background:#e4e4e0; text-decoration:none;}
#menu-nav li.current-menu-item{position:relative;}
#menu-nav li.current-menu-item a{background: #41618c; color:#f4f4f3;}
#menu-nav span{ width:20px; height:11px; float:left;clear:left; background:url(images/active.png) no-repeat; position:absolute; top:27px; left:0; }
The problem I am having is again, getting the arrow to be centered on each tab. Currently, the span has a positoion of left:0. Typically, I would give it a value of 50% and set a negative margin-left of half the parent's width; however, the parent's widths keep changing (because each tab has different text. SO, I need a jquery solution that will center the arrow based on it's parents width. I hope that makes sense!
You don't need positioning for this. Use display:block and margin:auto instead:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
<title>Centering absolutely positioned div based on parent's width (Jquery)</title>
<style type="text/css">
#menu-nav {list-style:none;}
#menu-nav {float:right; clear:right; margin-top:30px;font-family:'Arvo'}
#menu-nav li {list-style:none;margin: 0 10px; float:left;}
#menu-nav a {color:#9c9c98;padding:6px 9px; font-size:17px; background:#e4e4e0; text-decoration:none;}
#menu-nav li.current-menu-item a {background: #41618c; color:#f4f4f3;}
#menu-nav li.current-menu-item span {display:block;width:20px; height:11px;margin:auto;background:url(images/active.png) no-repeat;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('li.current-menu-item a').after('<span></span>');
});
</script>
</head>
<body>
<ul id="menu-nav">
<li><a href="#">Home</a></li>
<li><a href="#">Artistse</a></li>
<li><a href="#">About</a></li>
<li class="current-menu-item"><a href="#">News</a></li>
<li><a href="#">Store</a></li>
<li><a href="#">Contact</a></li>
</ul>
</body>
</html>
For the record, I think you're taking the completely wrong approach and should ditch the JavaScript, instead changing the background image of the <li> element, using padding-bottom to make room for it:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
<title>Centering absolutely positioned div based on parent's width (Jquery)</title>
<style type="text/css">
#menu-nav {list-style:none;}
#menu-nav {float:right; clear:right; margin-top:30px;font-family:'Arvo'}
#menu-nav li {list-style:none;margin: 0 10px; float:left;}
#menu-nav a {color:#9c9c98;padding:6px 9px; font-size:17px; background:#e4e4e0; text-decoration:none;}
#menu-nav li.current-menu-item a {background: #41618c; color:#f4f4f3;}
#menu-nav li.current-menu-item {background:url(images/active.png) no-repeat CENTER BOTTOM;padding-bottom:11px;}
</style>
</head>
<body>
<ul id="menu-nav">
<li><a href="#">Home</a></li>
<li><a href="#">Artistse</a></li>
<li><a href="#">About</a></li>
<li class="current-menu-item"><a href="#">News</a></li>
<li><a href="#">Store</a></li>
<li><a href="#">Contact</a></li>
</ul>
</body>
</html>
I'm agree with LeguRi, try without Javascript, this is another approach with css, i like to put always a SPAN tag inside my link, you get one more level for use CSS.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
<title>Centering absolutely positioned div based on parent's width (Jquery)</title>
<style type="text/css">
#menu-nav {
margin:30px 0 0 0; padding:5px 0 0 0;
float:right; clear:right; font-family:'Arvo'
text-align:right;
background:#ccc;
}
#menu-nav li {
list-style:none;
display:inline;
}
#menu-nav li a {
display: inline-block;
padding-bottom:11px;
}
#menu-nav li a span {
display: inline-block;
margin: 5px 10px 0px 10px; padding:6px 9px;
font-size:17px; color:#9c9c98; text-decoration:none;
background:#e4e4e0;
}
#menu-nav li.current-menu-item a {
background:url(images/active.png) center bottom no-repeat;
}
#menu-nav li.current-menu-item a span {
background: #41618c; color:#f4f4f3;
}
</style>
</head>
<body>
<ul id="menu-nav">
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Artistse</span></a></li>
<li><a href="#"><span>About</span></a></li>
<li class="current-menu-item"><a href="#"><span>News</span></a></li>
<li><a href="#"><span>Store</a></span></li>
<li><a href="#"><span>Contact</a></span></li>
</ul>
</body>
</html>
加载中,请稍侯......
精彩评论