Javascript implements two-level navigation menu effects with rounded corners. Code _ javascript tips-js tutorial

This article mainly introduces javascript code for implementing two-level navigation menu effects with rounded corners, involving javascript mouse events and dynamic conversion of page element styles, which is of great practical value, for more information about how to use JavaScript to implement the two-level navigation menu with rounded corners, see the example below. Share it with you for your reference. The details are as follows:

This is a menu with rounded corners made by JS. It supports two levels of menu display. I like the style and it is easy to modify and use, so that new users can get started quickly. You can use several rounded corner images to modify the menu. You can download the code for favorites. Really nice blue navigation bar code.

The running effect is as follows:

The Online Demo address is as follows:

Http://demo.jb51.net/js/2015/js-cicle-nav-menu-style-codes/

The Code is as follows:

Code of the blue horizontal secondary menu of the rounded corner, and the cursor goes through to display the sub-menuScript function MM_reloadPage (init) {if (init = true) with (navigator) {if (appName = "Netscape") & (parseInt (appVersion) = 4) {document. MM_pgW = innerWidth; document. MM_pgH = innerHeight; onresize = MM_reloadPage ;}} else if (innerWidth! = Document. MM_pgW | innerHeight! = Document. MM_pgH) location. reload ();} MM_reloadPage (true); function MM_findObj (n, d) {// v4.01 var p, I, x; if (! D) d = document; if (p = n. indexOf ("? ")> 0 & parent. frames. length) {d?parent.frames=n.substring(p=1}}.doc ument; n = n. substring (0, p);} if (! (X = d [n]) & d. all) x = d. all [n]; for (I = 0 ;! X & I
 
  
Body {font-family: \ 5B8B \ 4F53, Arial Narrow, arial, serif; background: # ffffff; font-size: 12px;} body, p, dl, dt, dd, ul, ol, li, pre, form, fieldset, input, textarea, blockquote, emBED {padding: 0; margin: 0 ;}li {list-style-type: none ;} a {text-decoration: none; color: # 20537A;} a: hover {text-decoration: underline ;}. topmenu {width: 980px; height: 42px; margin: 0 auto; position: relative; left: 0px; top: 0px; background: url ('images/nav_li_bg.gif ') repeat-x right center ;}. topmenu. nav_content {padding-left: 25px; background: url ('images/nav_li_left.gif ') no-repeat; float: left ;}. topmenu. nav_content li {width: 126px; height: 42px; float: left; line-height: 42px; background: url ('images/nav_li_line.gif ') no-repeat right; text-align: center; font-weight: bold ;}. topmenu. nav_content li a {color: # fff; width: 126px; height: 42px; display: block ;}. topmenu. nav_content li. current a {width: 126px; height: 42px; line-height: 42px; display: block; color: # fff ;}. topmenu. nav_content li. current a: hover {line-height: 42px ;}. topmenu. nav_content li a: hover {line-height: 42px; text-decoration: none; background: url ('images/nav_li_hover.gif ') no-repeat; color: #000 ;}. topmenu. nav_content li. end {background: none ;}. topmenu. nav_content li. right {padding-left: 47px; width: 26px; background: url ('images/nav_li_right.gif ') no-repeat right top; height: 42px ;}. submenu {visibility: hidden; position: absolute; top: 42px; left: 0; background: url ('images/sub_li_bg.gif ') repeat-x right top ;}. submenu. subnav {padding-left: 33px; background: url ('images/sub_li_left.gif ') no-repeat; float: left ;}. submenu. subnav li {height40px; float: left; background: url ('images/arrow.gif ') no-repeat left 15px ;}. submenu. subnav li a {color: #333; display: block; padding: 0 12px; line-height: 40px; text-decoration: none ;}. submenu. subnav li a: hover {color: # 0a4aaa; text-decoration: none ;}. submenu. subnav li. subright {width: 33px; background: url ('images/sub_li_right.gif ') no-repeat right top; height: 40px ;}# Layer1 {left: 30px ;}# Layer2 {left: 80px ;}# Layer3 {left: 280px ;}# Layer4 {left: 400px ;}# Layer5 {left: auto; right: 80px ;}
  

  

  

  
 

   
  
First page
   
  
Webpage Special Effects
   
  
E-commerce
   
  
Navigation Bar
   
  
Online Advertisement
   
  
Search Engine
   
  
About us
   
  

  
 
  

  
  
  
 
  
 
 
   
  
Source code download
  
   
  
Navigation bar code
  
   
  
E-commerce
  
   
  
Marketing Outsourcing
  
   
  
E-commerce
  
   
  
 
  
 
  

  

  
  
  
 
  
 
 
   
  
Programming books
  
   
  
Navigation bar code
  
   
  
Business Talents
  
   
  
Network Outsourcing
  
   
  
E-commerce
  
   
  
Navigation bar code
  
   
  
 
  
 
  

  

  
  
  
 
  
 
 
   
  
Forum community
  
   
  
Navigation bar code
  
   
  
E-commerce Talents
  
   
  
E-commerce
  
   
  
 
  
 
  

  

  
  
  
 
  
 
 
   
  
Tutorial articles
  
   
  
Navigation bar code
  
   
  
Website category
  
   
  
E-commerce
  
   
  
 
  
 
  

  

  
  
  
 
  
 
 
   
  
Latest update
  
   
  
Navigation bar code
  
   
  
Classified Information Network
  
   
  
E-commerce
  
   
  
 
  
 
  

  

  

 

I hope this article will help you design javascript programs.