- This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
-
AuthorPosts
-
November 10, 2010 at 11:39 am #26967dclardyMember
All:
I have only gotten this to work on a WordPress site once, and I thought that I could do it again. Man, I was crazy for thinking that copying and pasting would make it work!
Here is the js:
$(function(){
var $el, leftPos, newWidth,
$mainNav = $("#page-nav");
/*
EXAMPLE ONE
*/
$mainNav.append("");
var $magicLine = $("#magic-line");
$magicLine
.width($(".current_page_item").width())
.css("left", $(".current_page_item").position().left)
.data("origLeft", $magicLine.position().left)
.data("origWidth", $magicLine.width());
$("#page-nav li").find("a").hover(function() {
$el = $(this);
leftPos = $el.position().left;
newWidth = $el.parent().width();
$magicLine.stop().animate({
left: leftPos,
width: newWidth
});
}, function() {
$magicLine.stop().animate({
left: $magicLine.data("origLeft"),
width: $magicLine.data("origWidth")
});
});
});Here is the styling of the menu:
/*
CSS-Tricks Example
by Chris Coyier
https://css-tricks.com
*/
#navigation { margin-bottom: 15px; }
#page-nav { height: 24px; background-color: #807d7d; border-top: 3px solid #f8ba4f; border-bottom: 3px solid #f8ba4f; }
.group:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}
#page-nav { margin: 0 auto; list-style: none; position: relative; width: 960px; padding-bottom: }
#page-nav li { display: inline;}
#page-nav li a { color: #f8ba4f; font-size: 14px; display: block; float: left; padding: 6px 20px 6px 20px;
text-decoration: none; text-transform: uppercase; margin: 0 auto;}
#page-nav li a:hover { color: white; background: #f8ba4f;}
#magic-line { position: absolute; bottom: -25px; left: 0; width: 100px; height: 3px; background: #FF0000; }
.current_page_item a { color: white !important; background: #f8ba4f; }I have made the line red so that it can be seen easily. The thing moves and changes sizes, but it does not start in the correct position. Any help here would be great!
November 10, 2010 at 1:03 pm #76182cybershotParticipantwhen you solve a problem. mark the thread solved. I helps when people are searching to know there is an answer
-
AuthorPosts
Viewing 2 posts - 1 through 2 (of 2 total)
- The forum ‘CSS’ is closed to new topics and replies.