Melna navigācija uz CSS - Forums





 
Lappuse 1 no 11
Forums » UCOZ » JS/CSS » Melna navigācija uz CSS
Melna navigācija uz CSS
lavalairPievienots: Trešdiena, 11.01.2012, 23:22:28
Ieraksti:
Amats: Dzēstās
Pašlaik:






Vietā, kurā gribam redzēt navigāciju, liekam šo:
Code
<ul id="menu">  
   <li><a href="#">Sākums</a></li>  
   <li>  
   <a href="#">Kategorijaa</a>  
   <ul>  
   <li><a href="#">CSS</a></li>  
   <li><a href="#">Grafika</a></li>  
   <li><a href="#">Citi</a></li>  
   <li><a href="#">Dizaini</a></li>  
   </ul>  
   </li>  
   <li><a href="#">Amati</a></li>  
   <li><a href="#">Par mums</a></li>  
   <li><a href="#">Kontakti</a></li>  
</ul>


Savā CSS failā liekam šo te:
Code
#menu  
{  
   width: 100%;  
   margin: 0;  
   padding: 10px 0 0 0;  
   list-style: none;  
   background: #111;  
   background: -moz-linear-gradient(#444, #111);  
   background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));  
   background: -webkit-linear-gradient(#444, #111);  
   background: -o-linear-gradient(#444, #111);  
   background: -ms-linear-gradient(#444, #111);  
   background: linear-gradient(#444, #111);  
   -moz-border-radius: 50px;  
   border-radius: 50px;  
   -moz-box-shadow: 0 2px 1px #9c9c9c;  
   -webkit-box-shadow: 0 2px 1px #9c9c9c;  
   box-shadow: 0 2px 1px #9c9c9c;  
}  

#menu li  
{  
   float: left;  
   padding: 0 0 10px 0;  
   position: relative;  
}  

#menu a  
{  
   float: left;  
   height: 25px;  
   padding: 0 25px;  
   color: #999;  
   text-transform: uppercase;  
   font: bold 12px/25px Arial, Helvetica;  
   text-decoration: none;  
   text-shadow: 0 1px 0 #000;  
}  

#menu li:hover > a  
{  
   color: #fafafa;  
}  

*html #menu li a:hover /* IE6 */  
{  
   color: #fafafa;  
}  

#menu li:hover > ul  
{  
   display: block;  
}  

/* Подменю */  

#menu ul  
{  
   list-style: none;  
   margin: 0;  
   padding: 0;  
   display: none;  
   position: absolute;  
   top: 35px;  
   left: 0;  
   z-index: 99999;  
   background: #444;  
   background: -moz-linear-gradient(#444, #111);  
   background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));  
   background: -webkit-linear-gradient(#444, #111);  
   background: -o-linear-gradient(#444, #111);  
   background: -ms-linear-gradient(#444, #111);  
   background: linear-gradient(#444, #111);  
   -moz-border-radius: 5px;  
   border-radius: 5px;  
}  

#menu ul li  
{  
   float: none;  
   margin: 0;  
   padding: 0;  
   display: block;  
   -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;  
   -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;  
   box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;  
}  

#menu ul li:last-child  
{  
   -moz-box-shadow: none;  
   -webkit-box-shadow: none;  
   box-shadow: none;  
}  

#menu ul a  
{  
   padding: 10px;  
   height: auto;  
   line-height: 1;  
   display: block;  
   white-space: nowrap;  
   float: none;  
   text-transform: none;  
}  

*html #menu ul a /* IE6 */  
{  
   height: 10px;  
   width: 150px;  
}  

*:first-child+html #menu ul a /* IE7 */  
{  
   height: 10px;  
   width: 150px;  
}  

#menu ul a:hover  
{  
   background: #0186ba;  
   background: -moz-linear-gradient(#04acec, #0186ba);  
   background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));  
   background: -webkit-linear-gradient(#04acec, #0186ba);  
   background: -o-linear-gradient(#04acec, #0186ba);  
   background: -ms-linear-gradient(#04acec, #0186ba);  
   background: linear-gradient(#04acec, #0186ba);  
}  

#menu ul li:first-child a  
{  
   -moz-border-radius: 5px 5px 0 0;  
   border-radius: 5px 5px 0 0;  
}  

#menu ul li:first-child a:after  
{  
   content: '';  
   position: absolute;  
   left: 30px;  
   top: -8px;  
   width: 0;  
   height: 0;  
   border-left: 5px solid transparent;  
   border-right: 5px solid transparent;  
   border-bottom: 8px solid #444;  
}  

#menu ul li:first-child a:hover:after  
{  
   border-bottom-color: #04acec;  
}  

#menu ul li:last-child a  
{  
   -moz-border-radius: 0 0 5px 5px;  
   border-radius: 0 0 5px 5px;  
}  

#menu:after  
{  
   visibility: hidden;  
   display: block;  
   font-size: 0;  
   content: " ";  
   clear: both;  
   height: 0;  
}  

* html #menu { zoom: 1; } /* IE6 */  
*:first-child+html #menu { zoom: 1; } /* IE7 */


 
Forums » UCOZ » JS/CSS » Melna navigācija uz CSS
Lappuse 1 no 11
Meklēšana:
Foruma statistika
Jaunākās tēmas Populārākās tēmas Aktīvākie lietotāji Jaunākie lietotāji
* Nerāda filmu (0)
* www.kinofilmnet.lv - vīruss (0)
* www.kinofilmnet.lv - vīruss (0)
* Skaistule un briesmonis (0)
* Galigi garam (3)
* Ctrl + V (60)
* Ir / Nav spēle (78)
* Jautājumu spēle! (67)
* Ctrl + V (60)
* Dizains (16)
* Kādu OS tu lieto? (14)
* Neaceros paroli. (14)
* More (111 ieraksti)
* SMILE (70 ieraksti)
* palulu13 (44 ieraksti)
* CsDeva (41 ieraksti)
* chaa (30 ieraksti)
* Burvislv (28 ieraksti)
* ziiilis (09.12.2016 13:03:12)
* opijs (06.12.2016 09:46:33)
* adazhanTus (03.12.2016 21:44:57)
* FlamesongDyebytots (01.12.2016 23:29:58)
* Bettyerove (30.10.2016 06:52:22)
* Benniecef (24.10.2016 03:52:02)