7. Create a webpage Dreamweaver (floating dynamic hierarchical navigation) and a webpage dreamweaver

7. Create a webpage Dreamweaver (floating dynamic hierarchical navigation) and a webpage dreamweaver

Preparation of floating dynamic hierarchical Navigation:

1. First, reference a jquery file in

1 <script language="javascript" type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

 

2. Insert div

1 <div id = "apDiv1">  2 <nav id = "menu"> 3 <div class = "daohang" style =" background-image: url (img/bg.png) "> 4 <a href =" index.html "> <div style =" background-image: url (img/menu-hover.png); color: # fff "> homepage </div> </a> 5 <a href =" about us.html "target =" _ blank "> <div> 6 about us </div> </a> 7 8 <a href = "services.html" target = "_ blank"> <div> coffee culture </div> </a> 9 10 <a href = "price list.html "target =" _ blank "> <div> price list </div> </a> 11 12 <a href =" contact.html "target =" _ blank "> <div> Contact Us </div> </a> 13 14 </div> 15 </nav> 16 <div style = "color: # fff; line-height: 35px; background-image: url (img/menu-hover.png); border: solid medium #965D28; margin-top: 3px; "onclick =" menuvisible () "> 17 <input style =" color: # fff; border: none; width: 100%; background-image: url (img/menu-hover.png); font-family: 'simhei '; font-size: 16px, height: 100%, line-height: 35px; "type =" button "value =" <-- MENU --> "/> </div> 18 <div style =" background-image: url (img/bg.png) "> <a href =" # top "style =" text-decoration: none; color: #965D28; line-height: 30px; "> TOP </a> </div> 19 </div>

 

3. Create a CSS style sheet

1/* ---- navigation ----- */2 # apDiv1 {3 position: fixed; 4 left: auto; 5 top: auto; 6 bottom: auto; 7 width: 237px; 8 height: auto; 9 z-index: 2; 10 margin-top:-8px; 11 margin-left: 40px; 12 text-align: center; 13/* border: solid #965D28; */14 font-size: 16px; 15 font-family: ""; 16 color: #965D28; 17 background-image: url (.. /img/bg.png); 18} 19 # menu {20 display: none; 21} 22. daohang div {23 height: 30px; 24 z-index: 2; 25 margin: 0 auto; 26 text-align: center; 27 padding-top: 5px; 28 overflow: hidden; 29 padding-top: 10px; 30 color: 965D28; 31} 32. daohang div: hover {33 height: 30px; 34 z-index: 2; 35 margin: 0 auto; 36 background-image: url (.. /img/menu-hover.png); 37 text-align: center; 38 overflow: visible; 39 color: # fff; 40} 41 42. daohang li {43 margin-left: 237px; 44 list-style-type: none; 45 background-color: # D3A23A; 46 width: 160px; 47 line-height: 30px; 48 color: # 422B1D; 49 position: relative; 50 top:-40px; 51 background-image: url (.. /img/bg.jpg); 52 border: solid thin; 53 border-color: #965D28; 54 z-index: 1; 55} 56. daohang li: hover {57 margin-left: 237px; 58 list-style-type: none; 59 background-color: # D3A23A; 60 width: 160px; 61 line-height: 50px; 62 color: # fff; 63 position: relative; 64 top:-40px; 65 border: solid thin; 66 border-color: #965D28; 67 background-image: url (.. /img/bg.png); 68 z-index: 1; 69} 70. daohang a: link, a: visited {71 text-decoration: none; 72 color: #965D28; 73} 74. daohang a: hover {75 text-decoration: none; 76 color: # fff; 77}

4. Trigger the mouse click event (written in the body)

1 <script> 2 function menuvisible () {3 $ ("nav"). toggle ();/* switch */4} 5 </script>

Now, navigation production is complete ~