Lets start styling the navigation menu! We first write the rules for the unordered list - targeted with the fancyNav class, and the li items. We will be focusing primarily on the navigation menu, so I will be skipping the boring parts of the file. I would suggest that you download the menu code from the button above, and open that file in a text editor. Our CSS styles are defined in assets/styles.css. However, it does look best in Firefox 4, as it supports animating :before and :after pseudo elements via the transition property (other browsers are expected to follow suite). Everything is done with CSS3 gradients, box shadows, and multiple backgrounds.Īs for browser support, the menu works in the latest versions of Firefox, Chrome, Safari and Opera, while it is still usable in every IE version from 7 onwards. You might find it surprising that the navigation menu we are building does not use any images (except for the home icon - a transparent png). This will enable us to use the :target pseudo-class to style the currently selected menu item. Another thing to point out is that each of the LI elements has an unique ID, linked to from the anchor elements inside them. This will make the code more portable and limit any possible side effects. The unordered list has a fancyNav class applied to it, which we will be using to limit the effect of the CSS styles that we will be writing in a moment. We will be concentrating on the UL element inside the nav tag. In the body of the document, we have the header, nav and footer HTML5 tags, which divide the page into three sections with semantic value.
It contains a declaration and includes the Lobster font into our page, from Google's Web Font directory, which has grown to include more than 100 wonderful open source fonts, generously hosted by Google. You can notice that we are including a stylesheet from Google APIs. Looks best in Firefox 4, usable everywhere.
As it is enclosed in a conditional comment, it is only going to be requested in IE browsers and will not affect the performance of the others: index.html ĬSS3 Animated Navigation Menu | Tutorialzine Demo We are using HTML5 tags extensively, so we will need to include the HTML5 enabling script for IE in the head section of the document. The first step is to define the HTML backbone of the website. We will be using some neat features such as the :target pseudo selector and :after elements.
In this short tutorial, we will be using the power of CSS3 effects and transitions, to build a JavaScript-free animated navigation menu which you can use to add a polished look to your website or template.
0 kommentar(er)
