Shulou(Shulou.com)06/01 Report--

This article mainly shows you "how HTLM5+css3 realizes simple navigation menu", the content is simple and easy to understand, and the organization is clear. I hope it can help you solve your doubts. Let Xiaobian lead you to study and learn this article "how HTLM5+css3 realizes simple navigation menu".

Simple navigation menu

Write this navigation menu code using html5 css3's new semantic tags

html code:

Home Personal Blog Template Slow Life

CSS code:

nav ul li { display:inline;margin-right:10px;}nav ul li a {color:#000;display:block;float:left;padding:5px;}nav ul li a:hover {background:#eee;color:black;}}

If you want the navigation highlighted, you can add a js code:

var obj=null;var As=document.getElementById('nav').getElementsByTagName('a');obj = As[0];for(i=1;i=0)obj=As[i];}obj.id='nav_current'

Tip: in order for js to get the id value of the menu, you should add an id to the nav tag in html.

The highlighted style nav_current should also be written in css, such as:

#nav_current{background:#yee;color:red;} The above is "HTLM5+css3 how to achieve a simple navigation menu" All the contents of this article, thank you for reading! I believe that everyone has a certain understanding, hope to share the content to help everyone, if you still want to learn more knowledge, welcome to pay attention to the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.