Advertisement
JavaScript & AJAX

Quick Tip: How to Write a Neat FlipNav Script

by

Somehow, I inadvertently started a navigation series over the last few weeks. It's purely coincidence, mostly spawned by emails and such. This week, we're going to mimic the neat navigation functionality, found on JohnMayer.com. Simply mouse over one of the navigation items to see the effect. However, we're going to make it a bit more flexible by removing the need for images. We'll achieve the effect using only CSS and JavaScript.

Other Viewing Options

Related Posts
  • Computer Skills
    Office
    How to Add Audio to PowerPoint PresentationsPowerpoint sound
    Sounds effects and background audio, if used effectively, can be a nice addition to your PowerPoint presentations. Here's how to get audio added to your presentations, and get it to work the way you want.Read More…
  • Web Design
    Community Projects
    Community Project: The Tuts+ Illustrator Wireframe KitWireframe thumb
    Calling all community members! We have a little project for you to take part in! We're compiling a wireframe kit for Adobe Illustrator, built by you, the Tuts+ community. Read on to see how you can take part.Read More…
  • Design & Illustration
    Illustration
    How to Create an Abstract Isometric Cityscape in Adobe IllustratorIsometric tut preview
    In the first of a two part tutorial, we're going to be creating an isometric style illustration using Adobe Illustrator and Photoshop. In our second tutorial, we'll use this graphic to create a cover and inside spread of a magazine in InDesign. Read More…
  • Computer Skills
    App Training
    How to Build Your Own WikiMediawiki logo
    Wikis are great for collaborative writing—as Wikipedia has shown—but how exactly would you make your own? Here's everything you need to start a wiki, get your first content added, and make sure everything's organized and easy to find in your wiki.Read More…
  • Code
    Creative Coding
    Setting Up Grunt For Your Next ProjectGrunt logo 400
    In the first post in this series I gave a quick overview of Grunt and in the next post I'm going to walk you through the necessary steps as to how using Grunt can improve your WordPress development skills. Specifically, we'll talk in-depth about the necessary files like package.json and Gruntfile.js, but for now we are going to create a few sample files so that you can run Grunt with your WordPress theme or plugin project.Read More…
  • Design & Illustration
    Articles
    Three Weeks of Spooky Content and the Skull Decoration Challenge! Skull400
    There are two events in the annual calendar that are responsible for a huge portion of our inspiration as vector artists. It just so happens these days are side by side... Halloween and Day of the Dead (Día de Muertos). This year, Tuts+ is giving you three weeks of vector educational content inspired by Halloween and Day of the Dead, and we're kicking off a new Community Project. Let's jump in and see what we've got planned over the next three weeks! Please note: entries for the community project are now closed. However you're free to submit your designs if you're still wanting a challenge, they just won't be eligible for the showcase.Read More…