In this tutorial we will create a unique sliding box navigation. The idea is to make a box with the menu item slide out, while a thumbnail pops up. We will also include a submenu box with further links for some of the menu items. The submenu will slide to the left or to the right depending on which menu item we are hovering.
Here is a tutorial on how to code an overlapping tabbed menu.
Create your own drop down menu with nested submenus using CSS and a little JavaScript
Today’s tutorial will bring you through the process of building a slick menu using a single CSS sprite image. It’s a simple, but elegant solution for most websites.
Buttons on the top, content reside in different DIV elements, Click on one of the buttons, it shows the relevant content; Click on other buttons, it hides the existing and display the correct one.
There are a few websites we’ve seen lately that have a left hand navigation automatically updates it’s selection based on where you’ve scrolled to on the page. This tutorial will show you exactly how to achieve just that.
Today’s tutorial will bring you through the process of building a slick menu using a single CSS sprite image. It’s a simple, but elegant solution for most websites.
In this tutorial you will learn how to create a useful hover-based user interface using jQuery, CSS3, HTML5 and @font-face
It is a short jQuery tutorial on how to achieve fading hover effects.
In the following tutorial we are going to go through how to create a jQuery menu slider.
In this simple tutorial you will learn how you how to create a sliding menu button using jquery
In this tutorial we will create a unique bottom slide out menu. This large menu will contain some title and a description of the menu item. It will slide out from the bottom revealing the description text and some icon. We will use some CSS3 properties for some nice shadow effects and jQuery for the interaction.
In this tutorial we will create a unique bottom slide out menu. This large menu will contain some title and a description of the menu item. It will slide out from the bottom revealing the description text and some icon. We will use some CSS3 properties for some nice shadow effects and jQuery for the interaction.
Below I’ll be going into the code for developing a very basic dropdown navigation in jQuery. This will include a sub-menu of links to different profiles such as Twitter and Facebook. To create your own setup I would recommend checking Icon Finder to match any social networks you enjoy. But this navigation can be used for almost anything requiring a drop-down setup.
Amazing tutorial how to make drop-down menu.
If you are a big Mac fan, you will love this CSS dock menu. It is using Jquery library and Fisheye component from Interface and some of my icons. It comes with two dock position: top and bottom. This CSS dock menu is perfect to add on to my iTheme. Here I will show you how to implement it to your web page.
Rollover navigation with a glow
We will create a menu with little icons that will rotate when hovering. Also, we will make the menu item expand and reveal some menu content, like links or a search box.
According to usability expert Jakob Nielson, mega drop down menus tested to be more efficient for large scale websites.I decided to experiment with different ways of implementing this technique and would like to share how I achieved this method.
Providing an intuitive, yet eye-catching navigation on your site, is one of the ingredients for a great design. And with the performance improvements in newer browsers and the rise of JavaScript frameworks such as jQuery, it is becoming easier to include beautiful animations in your page designs.