main navigation (2-level-depth) - HTML Snipplr Social Repository

Revision: 19258

at October 19, 2009 22:18 by xxc

Updated Code

<style>
#mainNav li{display:block;position:relative;height:31px;overflow:hidden;float:right;}
#it5 {width:97px;} 
#it4 {width:94px;}
#it3 {width:95px;}
#it2 {width:101px;}
#it1 {width:106px;}

.NavT {display:block;height:38px;text-indent:-9999px;}
#it5 .NavT {background:url(/img/bg-mainNav-item.png) 0 0 no-repeat; width:97px;}
#it4 .NavT {background:url(/img/bg-mainNav-item.png) -97px 0 no-repeat; width:94px;}
#it3 .NavT {background:url(/img/bg-mainNav-item.png) -191px 0 no-repeat; width:95px;}
#it2 .NavT {background:url(/img/bg-mainNav-item.png) -286px 0 no-repeat; width:101px;}
#it1 .NavT {background:url(/img/bg-mainNav-item.png) -387px 0 no-repeat; width:106px;}
#it5 .NavT:hover {background:url(/img/bg-mainNav-item.png) 0 -31px no-repeat;}
#it4 .NavT:hover {background:url(/img/bg-mainNav-item.png) -97px -31px no-repeat;}
#it3 .NavT:hover {background:url(/img/bg-mainNav-item.png) -191px -31px no-repeat;}
#it2 .NavT:hover {background:url(/img/bg-mainNav-item.png) -286px -31px no-repeat;}
#it1 .NavT:hover {background:url(/img/bg-mainNav-item.png) -387px -31px no-repeat;}

ul#mainNav li p.subNav {position:absolute;top:38px;right:0px; height:110px;;background:url(/img/-bg-subNav.png) repeat-x; text-align:center; width:100%;border-top:1px #ccc solid;}
ul#mainNav li p.subNav a {display:block; color:#4b4b4b; background:url(/img/bg-mainNav-subNav-a.png) repeat-y; padding-top:4px;font-weight:bold; text-decoration:none;border-left:1px #ccc solid;border-right:1px #ccc solid;border-bottom:1px #ccc solid;height:22px;} ul#mainNav li p.subNav a:hover {color:#0583c9;}
</style>


<ul id="mainNav">
  <li id="it1"><a class="NavT" href="#">AAA</a><p class="subNav"><a href="#">A11</a><a href="#">A22</a></p></li>
  <li id="it2"><a class="NavT" href="#">BBB</a><p class="subNav"><a href="#">B11</a><a href="#">B22</a></p></li>
  <li id="it3"><a class="NavT" href="#">CCC</a><p class="subNav"><a href="#">C11</a><a href="#">C22</a></p></li>
  <li id="it4"><a class="NavT" href="#">DDD</a><p class="subNav"><a href="#">D11</a><a href="#">D22</a></p></li>
  <li id="it5"><a class="NavT" href="#">EEE</a><p class="subNav"><a href="#">E11</a><a href="#">E22</a></p></li>
</ul>

Revision: 19257

at October 19, 2009 22:17 by xxc

Updated Code

<style>
#mainNav li{display:block;position:relative;height:31px;overflow:hidden;float:right;}
#it5 {width:97px;} /*ä¸æ–‡æ¸¬è©¦è¨±åŠŸè“‹*/
#it4 {width:94px;}
#it3 {width:95px;}
#it2 {width:101px;}
#it1 {width:106px;}

.NavT {display:block;height:38px;text-indent:-9999px;}
#it5 .NavT {background:url(/img/bg-mainNav-item.png) 0 0 no-repeat; width:97px;}
#it4 .NavT {background:url(/img/bg-mainNav-item.png) -97px 0 no-repeat; width:94px;}
#it3 .NavT {background:url(/img/bg-mainNav-item.png) -191px 0 no-repeat; width:95px;}
#it2 .NavT {background:url(/img/bg-mainNav-item.png) -286px 0 no-repeat; width:101px;}
#it1 .NavT {background:url(/img/bg-mainNav-item.png) -387px 0 no-repeat; width:106px;}
#it5 .NavT:hover {background:url(/img/bg-mainNav-item.png) 0 -31px no-repeat;}
#it4 .NavT:hover {background:url(/img/bg-mainNav-item.png) -97px -31px no-repeat;}
#it3 .NavT:hover {background:url(/img/bg-mainNav-item.png) -191px -31px no-repeat;}
#it2 .NavT:hover {background:url(/img/bg-mainNav-item.png) -286px -31px no-repeat;}
#it1 .NavT:hover {background:url(/img/bg-mainNav-item.png) -387px -31px no-repeat;}

ul#mainNav li p.subNav {position:absolute;top:38px;right:0px; height:110px;;background:url(/img/-bg-subNav.png) repeat-x; text-align:center; width:100%;border-top:1px #ccc solid;}
ul#mainNav li p.subNav a {display:block; color:#4b4b4b; background:url(/img/bg-mainNav-subNav-a.png) repeat-y; padding-top:4px;font-weight:bold; text-decoration:none;border-left:1px #ccc solid;border-right:1px #ccc solid;border-bottom:1px #ccc solid;height:22px;} ul#mainNav li p.subNav a:hover {color:#0583c9;}
</style>


<ul id="mainNav">
  <li id="it1"><a class="NavT" href="#">AAA</a><p class="subNav"><a href="#">A11</a><a href="#">A22</a></p></li>
  <li id="it2"><a class="NavT" href="#">BBB</a><p class="subNav"><a href="#">B11</a><a href="#">B22</a></p></li>
  <li id="it3"><a class="NavT" href="#">CCC</a><p class="subNav"><a href="#">C11</a><a href="#">C22</a></p></li>
  <li id="it4"><a class="NavT" href="#">DDD</a><p class="subNav"><a href="#">D11</a><a href="#">D22</a></p></li>
  <li id="it5"><a class="NavT" href="#">EEE</a><p class="subNav"><a href="#">E11</a><a href="#">E22</a></p></li>
</ul>

Revision: 19256

at October 19, 2009 22:13 by xxc

Updated Code

<style>
#mainNav li{display:block;position:relative;height:31px;overflow:hidden;float:right;}
#it5 {width:97px;}
#it4 {width:94px;}
#it3 {width:95px;}
#it2 {width:101px;}
#it1 {width:106px;}

.NavT {display:block;height:38px;text-indent:-9999px;}
#it5 .NavT {background:url(/img/bg-mainNav-item.png) 0 0 no-repeat; width:97px;}
#it4 .NavT {background:url(/img/bg-mainNav-item.png) -97px 0 no-repeat; width:94px;}
#it3 .NavT {background:url(/img/bg-mainNav-item.png) -191px 0 no-repeat; width:95px;}
#it2 .NavT {background:url(/img/bg-mainNav-item.png) -286px 0 no-repeat; width:101px;}
#it1 .NavT {background:url(/img/bg-mainNav-item.png) -387px 0 no-repeat; width:106px;}
#it5 .NavT:hover {background:url(/img/bg-mainNav-item.png) 0 -31px no-repeat;}
#it4 .NavT:hover {background:url(/img/bg-mainNav-item.png) -97px -31px no-repeat;}
#it3 .NavT:hover {background:url(/img/bg-mainNav-item.png) -191px -31px no-repeat;}
#it2 .NavT:hover {background:url(/img/bg-mainNav-item.png) -286px -31px no-repeat;}
#it1 .NavT:hover {background:url(/img/bg-mainNav-item.png) -387px -31px no-repeat;}

ul#mainNav li p.subNav {position:absolute;top:38px;right:0px; height:110px;;background:url(/img/-bg-subNav.png) repeat-x; text-align:center; width:100%;border-top:1px #ccc solid;}
ul#mainNav li p.subNav a {display:block; color:#4b4b4b; background:url(/img/bg-mainNav-subNav-a.png) repeat-y; padding-top:4px;font-weight:bold; text-decoration:none;border-left:1px #ccc solid;border-right:1px #ccc solid;border-bottom:1px #ccc solid;height:22px;} ul#mainNav li p.subNav a:hover {color:#0583c9;}
</style>


<ul id="mainNav">
  <li id="it1"><a class="NavT" href="#">AAA</a><p class="subNav"><a href="#">A11</a><a href="#">A22</a></p></li>
  <li id="it2"><a class="NavT" href="#">BBB</a><p class="subNav"><a href="#">B11</a><a href="#">B22</a></p></li>
  <li id="it3"><a class="NavT" href="#">CCC</a><p class="subNav"><a href="#">C11</a><a href="#">C22</a></p></li>
  <li id="it4"><a class="NavT" href="#">DDD</a><p class="subNav"><a href="#">D11</a><a href="#">D22</a></p></li>
  <li id="it5"><a class="NavT" href="#">EEE</a><p class="subNav"><a href="#">E11</a><a href="#">E22</a></p></li>
</ul>

Revision: 19255

at October 19, 2009 22:05 by xxc

Initial Code

<ul id="mainNav">
  <li id="it1"><a class="subNav" href="#">AAA</a><p class="subNav"><a href="#">A11</a><a href="#">A22</a></p></li>
  <li id="it2"><a class="subNav" href="#">BBB</a><p class="subNav"><a href="#">B11</a><a href="#">B22</a></p></li>
  <li id="it3"><a class="subNav" href="#">CCC</a><p class="subNav"><a href="#">C11</a><a href="#">C22</a></p></li>
  <li id="it4"><a class="subNav" href="#">DDD</a><p class="subNav"><a href="#">D11</a><a href="#">D22</a></p></li>
  <li id="it5"><a class="subNav" href="#">EEE</a><p class="subNav"><a href="#">E11</a><a href="#">E22</a></p></li>
</ul>

Initial URL

Initial Description

Initial Title

main navigation (2-level-depth)

Initial Tags

navigation

Initial Language

HTML

Choose a language for easy browsing: