A CSS Navigation. Active State in Navigation - CSS Navigation Tutorial - Highlight Menu State - Active Navigation Tutorial CSS. CSS-Tricks. jQuery MagicLine Navigation. These "sliding" style navigation bars have been around a while, I just thought I'd take a crack at doing it myself as the opportunity came up recently.
Turns out it's really pretty darn easy. I put two examples together for it. The Idea The idea is to have a highlight of some kind (a background or an underline) follow you around as you mouse over the different links in the navigation. This will happen with jQuery and it's animation abilities. Typical list here.... <div class="nav-wrap"><ul class="group" id="example-one"><li class="current_page_item"><a href="#">Home</a></li><li><a href="#">Buy Tickets</a></li><li><a href="#">Group Sales</a></li><li><a href="#">Reviews</a></li><li><a href="#">The Show</a></li><li><a href="#">Videos</a></li><li><a href="#">Photos</a></li><li><a href="#">Magic Shop</a></li></ul></div> Notice the .nav-wrap div around it.
Do the ol' inline list elements with floated left anchors to get the list horizontal and avoid stairstepping. jQuery JavaScript Issues. AnythingSlider jQuery Plugin. Just what the world needs, another jQuery slider. YAWN. I know, check this one out though, it's got lots of cool features. Here on CSS-Tricks, I've created a number of different sliders. Three, in fact. This new AnythingSlider is an attempt at bringing together the functionality of all of those previous sliders and adding new features. View Demo Download Files The demo page has the current version, complete usage, and up-to-date changelog. Features Customization Adding/Removing Slides Just add or remove more <li> items from the list inside <div class="wrapper">, everything else happens automatically.
Adjusting Size For example, if you wanted to make the slides 580px wide instead of 680px wide, you just need to change some CSS. Linking Directly To Slides from Static Links Target the link using and ID or Class (or whatever), and apply a click handler. $("#slide-jump").click(function(e){ $('.anythingSlider').anythingSlider(6); e.preventDefault();}); Credits Share On. Garage Door Style Menu. Originally published on July 21, 2008 as only a jQuery technique. Now updated to include CSS3 and a combo technique which is mo' betta. A garage door style menu is where an image (the "door") slides up to reveal something behind it. We'll do this in two ways, with CSS3, and with jQuery. Then we'll combine them into a progressive enhancement way to handle it. The jQuery Method Right out of the box, jQuery provides the animate function, which allows us to morph some CSS attributes over time.
Thankfully, there is a plugin to help with this, the Background-Position Animation Plugin by Alexander Farkas. View Demo Download Files 1. We are going to need three different types of images here. Notice my guides. Second, we'll need to create the garage doors which we will call the "shutters". Lastly, we need a window which will act as the garage frame. 2. Here is the menu markup: The ID on the menu will give us all the specificity we need. 3.
The menu background is applied to the UL itself. 4. If (!