Lietotāju sarunas
BUZZ AMATU MEKLĒJUMOS | KONKURSS! IESPĒJA IEGŪT ESKLUZĪVU REKLĀMAS VIETU PORTĀLĀ!
Atlikušie simboli: 200

  • Lappuse 1 no 1
  • 1
Forums » uCoz sistēma » Skripti » Horizontāla navigācija
Horizontāla navigācija
wuxmachine Pievienots: Pirmdiena, 12.01.23, 00:45 | Ieraksts # 1 Offline

Ieraksti: 1081
GENERALISSIMO
1. Dodamies uz CSS - /panel/?a=tmpl;m=3;t=3
2. Kaut kur beigās ievietojam šo kodu:

Code
/* Galvenā navigācija - buzz.ucoz.lv */  
#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 */


3. Dodamies uz Top part of the website - /panel/?a=tmpl;m=1;t=AHEADER
4. Atrodam vietu, kur Jums jāatrodas šim kodam, kods:

Code
    <ul id="menu">  
   <li><a href="#">Sākumlapa</a></li>  
   <li>  
   <a href="#">Kategorija</a>  
   <ul>  
   <li><a href="#">BUZZ - BUZZ.UCOZ.LV</a></li>  
   <li><a href="#">BUZZ</a></li>  
   <li><a href="#">BUZZ</a></li>  
   </ul>  
   </li>  
   <li><a href="#">BUZZ.UCOZ.LV</a></li>  
   <li><a href="#">BUZZ</a></li>  
   <li><a href="#">BUZZ.UCOZ.LV</a></li>  
</ul>


Iznākums:

[table][/table]

[table]Demo: Šeit[/table]
Pielikumi: 6233558.png (23.7 Kb)



 
Forums » uCoz sistēma » Skripti » Horizontāla navigācija
  • Lappuse 1 no 1
  • 1
Meklēšana: