Sveicināts Viesis!
Lai apskatītu mūsu mājaslapu:
Ielogojies vai Reģistrējies

Reklāma:

Jaunākie ieraksti
Lietotāji
TOP 30 Reputācija
Foruma noteikumi
Meklētājs

Lietotāju sarunas
Atlikušie simboli: 200

  • Lappuse 1 no 1
  • 1
Forums » Ucoz Sistēma » Spotlight materiāli » Izvēlne ar cilnēm
Izvēlne ar cilnēm
RobiitsDate: Ceturtdiena, 2012-08-02, 00:16 | Message # 1



Ieraksti: 68
Reputācija: 5 
Balvas:1

Šo liekam, kur vēlamies redzēt izvēlni -
Code
<ul id="tabs">   
   <li><a href="#" title="tab1">Pirmā cilne</a></li>   
   <li><a href="#" title="tab2">Otrā cilne</a></li>   
   <li><a href="#" title="tab3">Trešā cilne</a></li>   
   <li><a href="#" title="tab4">Ceturtā cilne</a></li>   
   </ul>   

   <div id="content">   
   <div id="tab1">Pirmās cilnes saturs</div>   
   <div id="tab2">Otrās cilnes saturs</div>   
   <div id="tab3">Trešās cilnes saturs</div>   
   <div id="tab4">Ceturtās cilnes saturs</div>   
   </div>
<style>
#tabs{   
   overflow: hidden;   
   width: 100%;   
   margin: 0;   
   padding: 0;   
   list-style: none;   
   }   

   #tabs li{   
   float: left;   
   margin: 0 .5em 0 0;   
   }   

   #tabs a{   
   position: relative;   
   background: #ddd;   
   background-image: linear-gradient(to bottom, #fff, #ddd);   
   padding: .7em 3.5em;   
   float: left;   
   text-decoration: none;   
   color: #444;   
   text-shadow: 0 1px 0 rgba(255,255,255,.8);   
   border-radius: 5px 0 0 0;   
   box-shadow: 0 2px 2px rgba(0,0,0,.4);   
   }   

   #tabs a:hover,   
   #tabs a:hover::after,   
   #tabs a:focus,   
   #tabs a:focus::after{   
   background: #fff;   
   }   

   #tabs a:focus{   
   outline: 0;   
   }   

   #tabs a::after{   
   content:'';   
   position:absolute;   
   z-index: 1;   
   top: 0;   
   right: -.5em;   
   bottom: 0;   
   width: 1em;   
   background: #ddd;   
   background-image: linear-gradient(to bottom, #fff, #ddd);   
   box-shadow: 2px 2px 2px rgba(0,0,0,.4);   
   transform: skew(10deg);   
   border-radius: 0 5px 0 0;   
   }   

   #tabs #current a,   
   #tabs #current a::after{   
   background: #fff;   
   z-index: 3;   
   }   

   #content   
   {   
   background: #fff;   
   padding: 2em;   
   height: 220px;   
   position: relative;   
   z-index: 2;   
   border-radius: 0 5px 5px 5px;   
   box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);   
   }
</style>
<script>$(document).ready(function() {   
   $("#content div").hide(); //
   $("#tabs li:first").attr("id","current"); //   
   $("#content div:first").fadeIn(); //
     
   $('#tabs a').click(function(e) {   
   e.preventDefault();   
   $("#content div").hide(); //   
   $("#tabs li").attr("id",""); //   
   $(this).parent().attr("id","current"); //   
   $('#' + $(this).attr('title')).fadeIn(); //   
   });   
   })(); </script>


Dzīvais piemērs @SL -
http://u.to/CTkzAg


 
DuckDate: Piektdiena, 2012-08-03, 11:33 | Message # 2




Ieraksti: 19
Reputācija: 2 
Balvas:0

Paldies. smile
 
Forums » Ucoz Sistēma » Spotlight materiāli » Izvēlne ar cilnēm
  • Lappuse 1 no 1
  • 1
Meklēšana:

Sveicināts viesi!
Ja Jūs redzat šo ziņojumu, tad neesat ielogojies vai reģistrējies. Aicinām ielogoties savā profilā vai reģistrēt jaunu profilu, lai vairs neredzētu šo logu un varētu pilnvērtīgi lietot lapu.
SPOTLIGHTUCOZ.LV © 2012