Keresés az erőforrások között

CSS menü

Egy stílusos CSS menü weboldaladhoz.
bigblog2013-12-04 18:26:00 338 Forrás: webo4ka.ru

Egy stílusos CSS menü weboldaladhoz.

A Stílusok táblázata (CSS) sablonba a következő kódot illesszük:
Kód
.menu_container{    
     width:980px;    
     height:77px;    
     margin:40px auto 0 auto;    
     background:#09f;    
     overflow:hidden;    
     -webkit-box-shadow:0 0 7px #888;    
     -moz-box-shadow:0 0 7px #888;    
     box-shadow:0 0 7px #888;    
}    

.menu{    
     height:41px;    
     background:#333;    
}    

.menu ul{    
     position:relative;    
     float:left;    
}    

.menu ul li{    
     float:left;    
}    

.menu ul li a{    
     display:block;    
     height:41px;    
     padding:0 20px;    
     font-size:15px;    
     color:#777;    
     line-height:45px;    
     -webkit-transition:all .2s linear;    
     -moz-transition:all .2s linear;    
     -ms-transition:all .2s linear;    
     -o-transition:all .2s linear;    
     transition:all .2s linear;    
}    

.menu ul li:hover a,    
.menu ul li a.selected{    
     background:#09f;    
     color:#fff;    
}    

.menu ul li a:active{    
     color:#ccc;    
}    

.menu ul:hover li a.selected{    
     background:#333;    
     color:#777;    
}    

.menu ul li:hover a.selected{    
     background:#09f;    
     color:#fff;    
}    

.menu ul li a:active.selected{    
     color:#ccc;    
}    

.menu ul ul{    
     width:980px;    
     height:36px;    
     position:absolute;    
     left:0;    
     margin-left:8%;    
     filter:alpha(opacity=0);    
     opacity:0;    
     background:#09f;    
     -webkit-transition:all .4s ease-out .1s;    
     -moz-transition:all .4s ease-out .1s;    
     -ms-transition:all .4s ease-out .1s;    
     -o-transition:all .4s ease-out .1s;    
     transition:all .4s ease-out .1s;    
}    

.menu ul ul.visible{    
     z-index:1;    
     margin-left:0;    
     filter:alpha(opacity=100);    
     opacity:1;    
}    
.menu ul:hover ul.visible{    
     margin-left:8%;    
     filter:alpha(opacity=0);    
     opacity:0;    
}    
.menu ul li:hover ul.visible{    
     margin-left:0;    
     filter:alpha(opacity=100);    
     opacity:1;    
}    
.menu ul li:hover ul{    
     z-index:2;    
     margin-left:0;    
     filter:alpha(opacity=100);    
     opacity:1;    
}    
.menu ul ul li a{    
     height:36px;    
     padding:0 20px;    
     font-size:13px;    
     color:#fff;    
     text-transform:capitalize;    
     line-height:40px;    
     -webkit-transition:color .3s ease-in-out;    
     -moz-transition:color .3s ease-in-out;    
     -ms-transition:color .3s ease-in-out;    
     -o-transition:color .3s ease-in-out;    
     transition:color .3s ease-in-out;    
}    
.menu ul ul li:hover a{    
     color:#333;    
     text-shadow:1px 1px 5px #888;    
}    
.menu ul ul li a:active{    
     color:#666;    
}    
.search{    
     margin:3px 8px 0 0;    
     float:right;    
     border:solid 1px #555;    
}    
.search_field{    
     width:160px;    
     height:20px;    
     padding:6px 4px;    
     float:left;    
     color:#666;    
     font-size:13px;    
     line-height:20px;    
     background:#333;    
     -webkit-transition:color .2s linear;    
     -moz-transition:color .2s linear;    
     -ms-transition:color .2s linear;    
     -o-transition:color .2s linear;    
     transition:color .2s linear    
}    

.search_field:focus{    
     color:#999;    
}    

.button{    
     width:28px;    
     height:28px;    
     float:left;    
     background:#333 url(http://ucoztaska.ucoz.hu/src/search_icon.png) 0 3px;    
}


A honlap felső része sablonban, ahol a menüt szeretnénk látni, a következő kódot illesszük:
Kód
<div class="menu_container">      
     <nav class="menu">      
     <ul>      
     <li><a href="#" class="selected">Főoldal</a>      
     <ul class="visible">      
     <li><a href="#">Almenü 1</a></li>      
     <li><a href="#">Almenü 2</a></li>      
     <li><a href="#">Almenü 3</a></li>      
     <li><a href="#">Almenü 4</a></li>      
     <li><a href="#">Almenü 5</a></li>      
     <li><a href="#">Almenü 6</a></li>      
     </ul>      
     </li>      
     <li><a href="#">Fórum</a>      
     <ul>      
     <li><a href="#">Almenü 1</a></li>      
     <li><a href="#">Almenü 2</a></li>      
     <li><a href="#">Almenü 3</a></li>      
     <li><a href="#">Almenü 4</a></li>      
     <li><a href="#">Almenü 5</a></li>      
     <li><a href="#">Almenü 6</a></li>      
     </ul>      
     </li>      
     <li><a href="#">Fájlkatalógus</a>      
     <ul>      
     <li><a href="#">Almenü 1</a></li>      
     <li><a href="#">Almenü 2</a></li>      
     <li><a href="#">Almenü 3</a></li>      
     <li><a href="#">Almenü 4</a></li>      
     <li><a href="#">Almenü 5</a></li>      
     <li><a href="#">Almenü 6</a></li>      
     </ul>      
     </li>      
     <li><a href="#">Blog</a>      
     <ul>      
     <li><a href="#">Almenü 1</a></li>      
     <li><a href="#">Almenü 2</a></li>      
     <li><a href="#">Almenü 3</a></li>      
     <li><a href="#">Almenü 4</a></li>      
     <li><a href="#">Almenü 5</a></li>      
     <li><a href="#">Almenü 6</a></li>      
     </ul>      
     </li>      
     <li><a href="#">Honlapkatalógus</a>      
     <ul>      
     <li><a href="#">Almenü 1</a></li>      
     <li><a href="#">Almenü 2</a></li>      
     <li><a href="#">Almenü 3</a></li>      
     <li><a href="#">Almenü 4</a></li>      
     <li><a href="#">Almenü 5</a></li>      
     <li><a href="#">Almenü 6</a></li>      
     </ul>      
     </li>      
     <li><a href="#">Egyebek</a>      
     <ul>      
     <li><a href="#">Almenü 1</a></li>      
     <li><a href="#">Almenü 2</a></li>      
     <li><a href="#">Almenü 3</a></li>      
     <li><a href="#">Almenü 4</a></li>      
     <li><a href="#">Almenü 5</a></li>      
     <li><a href="#">Almenü 6</a></li>      
     </ul>      
     </li>      
     <li><a href="#">Kapcsolat</a>      
     <ul>      
     <li><a href="#">Almenü 1</a></li>      
     <li><a href="#">Almenü 2</a></li>      
     <li><a href="#">Almenü 3</a></li>      
     <li><a href="#">Almenü 4</a></li>      
     <li><a href="#">Almenü 5</a></li>      
     <li><a href="#">Almenü 6</a></li>      
     </ul>      
     </li>      
     </ul>      
     <form class="search">      
     <input type="text" class="search_field" name="search" placeholder="Keresés...">      
     <input type="submit" class="button" value="" >      
     </form>      
     </nav>      
     </div>   

Hozzászólások (0)

A hozzászólási lehetőség ideiglenesen kikapcsolva