In this experiment will show you how to achieve a simple blur effect applied on menu elements.
HTML
The first step is to lay down the HTML markup. Our structure is very simple.
Html5 - Css - Jquery - Slide show - Free sharing
Showing posts with label Menu Navigation. Show all posts
Showing posts with label Menu Navigation. Show all posts
jQuery cool auto moving submenu
we’re going to create an automatic moving submenu based on selected its parent. Each submenu is horizontally stacked, sequentially in the order of their parent menu. So when user moving their cursor to the one of parent menu its submenu will appeared by moving its horizontal position.
Pure CSS3 animation Menu Navigation
The example will only be visible in Firefox, Safari and Chrome because it uses the CSS3 Animation Property.
HTML
Now look carefully ... this markup is really easy, just create an unordered list and insert inside the links that we need, apply an .animation class every li that has a link and we will see later how the animation will apply to our links!
Beautiful CSS3 scroll Social Menu
we’ll learn how to code a fancy social networks menu with HTML5 and CSS3 and absolutely no images. Yup, that’s right! No images at all. We’ll also learn how to convert a normal font to a web-font.
CSS3 and html5 Flashy Menu
we'll going to show you how to create a flashy menu using CSS3. This tutorial is for beginners and can be completed fairly quickly. Make sure you click on the link below to see a demo of the menu and get the source code.
Awesome CSS3 animation menu
In this new category called “Tips and Tricks” we will introduce some quick and interesting methods around web development and web design. In today’s tip we’ll show you how to spice up your menu by adding a neat hover effect to it. The idea is to slide an image out to the right when hovering over a menu item.
Pure CSS3 slide dropdown Menu
As usual, we start with the HTML. Here is the html code of our menu. As usual – this is again UL-LI based navigation menu. The most interesting thing will be CSS styles of course.
Rich Media Dropdown Menu with jQuery
Today’s tutorial combines two good friends, jQuery and dropdown menus! “That boring old combination”, I hear you cry. But wait, this is a dropdown menu with a difference! It takes away all menus from your website, except for one easy to navigate list of top level links, with one dropdown menu for each, containing as menu child categories and as much rich media as you want!
jQuery BBC News Map menu plugin
The BBC News Map cleverly breaks England into 10 square-boundary regions, allowing them to make each region out of several <span> tags rather than one <area> tag. The use of the <span> tag means that each region can have more styles applied to it (such as background images and colours), making the development a little easier but, each region could only ever have square boundaries.
jQuery New Top Black Menu Bar like Google
Google has come up with a new look with the launch of Google Plus and one of the prominent changes we can observe is the black menu bar found on the top of Google Search Page and every other Google product like Google Plus(obviously), Google reader, etc. Almost every Google product by now has been integrated with the top black menu bar.
Awesome jQuery and CSS3 Interactive menu
This example will tell you how to create an interactive menu using CSS3 goodness and jQuery’s power.
The idea
The idea behind this example was to have some nicely arranged blocks and once you click on one of them, the block will start showing its hidden content starting at its current position.
Colorful jQuery animation slide menu
This is a nice and colorful jQuery and css menu
The Idea is to create a normal ul li menu and apply a top border to the anchor tags with colors that will match with the element background color when it is hovered.
The Idea is to create a normal ul li menu and apply a top border to the anchor tags with colors that will match with the element background color when it is hovered.
useful Tabbed Menu with jQuery
We are going to use the HTML element list to display the menu and the drop down.
Each of the top level menus are in their own list items and the drop down menus are lists placed inside the list items.
jQuery and CSS3 Animation effect
The markup is not difficult, we used two unordered lists, the first list follow insert all graphics (via CSS3) and animations, while the second listsocial will have links to social networks always with a nice animation.
jQuery useful Drop-Down Menu with Fixed list
The HTML is structured using unordered nested lists. I suppose I could have used ordered lists to facilitate maintainable numbering, but I thought it was fine this way and if someone wants to use ordered lists they can just alter the markup and make a small change in the script.
Pure useful CSS3 Dropdown Menu
e will code in pure CSS3 the Navigation Menu that you can find in Impressionist UI by Vladimir Kudinov.
Step 1 – HTML Markup
We will create an unordered list with a list item and an anchor tag for each menu link. To create the sub menu add another unordered list inside of the list.
Nice jQuery Walking Navigation
On a single page website with fixed position navigation, it will be nice to tell user on what section they are reading at. In this tutorial I am going to share how to create a walking navigation, on the other words, auto focus navigation based on user scrolling, by taking advantage of both jQuery and CSS animation.
The Trick
Subscribe to:
Posts (Atom)