| Mūsu banneris |
 |
Mēs būsim pagodināti, ja paņemsi musu banneri savai lapai.
|  |
 |
| Mūsu apmaklētājs |
|
Laipni lūdzam, Viesis
| |
|
|
 | |  |
| Galvenie » 2013 » Decembris » 13 » Interesants menju
|
Interesants menju. Krāsu var mainit. Viss notiek caur CSS.
Horizontālais menju.
Šo liek iekš CSS:
/* hrizontal menu */
.menuHolder {position:relative; float:left; overflow:hidden; font:normal bold 11px/35px verdana, sans-serif;}
.menuHolder .shadow {height:10px; width:90%; left:5%; top:-9px; position:absolute; z-index:100; background:#888;
-webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 1);
-moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 1);
-o-box-shadow: 0px 0px 20px rgba(0, 0, 0, 1);
box-shadow: 0px 0px 20px rgba(0, 0, 0, 1);
}
ul.menu {margin:0; list-style:none; display:block; float:left; height:100px; position:relative; padding:0 60px;}
ul.menu li {margin:0 5px 0 0; float:left;}
ul.menu li a {background:#aaa; color:#ddd; padding:0 10px; display:block; text-decoration:none;
-webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
-moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
-o-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius: 0 0 10px 10px;
-o-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
ul.menu li a.red {background:#a00;}
ul.menu li a.orange {background:#da0;}
ul.menu li a.yellow {background:#aa0;}
ul.menu li a.green {background:#060;}
ul.menu li a.blue {background:#00a;}
ul.menu li a.indigo {background:#2b0062;}
ul.menu li a.violet {background:#682bc2;}
ul.menu li a:hover {background:#aaa; color:#fff; padding:10px 10px 0 10px;}
ul.menu li a.red:hover {background:#c00;}
ul.menu li a.orange:hover {background:#fc0;}
ul.menu li a.yellow:hover {background:#cc0;}
ul.menu li a.green:hover {background:#080;}
ul.menu li a.blue:hover {background:#00c;}
ul.menu li a.indigo:hover {background:#5b1092;}
ul.menu li a.violet:hover {background:#8a2be2;}
Bet šis ir pats menju, liek augšējā lapas daļā:
<h2>Horizontal Tabs Menu</h2>
<div class="menuHolder">
<ul class="menu">
<li><a href="" class="red">PRODUCTS</a></li>
<li><a href="" class="orange">SERVICES</a></li>
<li><a href="" class="yellow">DEMOS</a></li>
<li><a href="" class="green">MENUS</a></li>
<li><a href="" class="blue">LAYOUTS</a></li>
<li><a href="" class="indigo">CONTACT</a></li>
<li><a href="" class="violet">PRIVACY</a></li>
</ul>
<div class="shadow"></div>
</div>
<br class="clear" />
Vertikālais menju.
Liekam iekš CSS:
/* vertical menu */
.menuHolder2 {position: relative; margin-left:10px; float:left; overflow:hidden; width:150px; height:400px; font:normal bold 11px/35px verdana, sans-serif;}
.menuHolder2 .shadow {width:10px; height:90%; top:5%; left:-9px; position:absolute; z-index:100; background:#888;
-webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.9);
-moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.9);
-o-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.9);
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.9);
}
ul.menu2 {margin:0 0 0 1px; list-style: none; display:block; width: 150px; position:relative; padding:60px 0;}
ul.menu2 li {margin:5px 0 0 0;}
ul.menu2 li a {background:#aaa; color:#ddd; padding:0 15px; width:90px; display:block; text-decoration:none;
-webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
-o-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius:0 10px 10px 0;
-o-border-radius:0 10px 10px 0;
border-radius:0 10px 10px 0;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
ul.menu2 li a.red {background:#a00;}
ul.menu2 li a.orange {background:#da0;}
ul.menu2 li a.yellow {background:#aa0;}
ul.menu2 li a.green {background:#060;}
ul.menu2 li a.blue {background:#00a;}
ul.menu2 li a.indigo {background:#2b0062;}
ul.menu2 li a.violet {background:#682bc2;}
ul.menu2 li a:hover {background:#aaa; color:#fff; padding:0 15px 0 40px;}
ul.menu2 li a.red:hover {background:#c00;}
ul.menu2 li a.orange:hover {background:#fc0;}
ul.menu2 li a.yellow:hover {background:#cc0;}
ul.menu2 li a.green:hover {background:#080;}
ul.menu2 li a.blue:hover {background:#00c;}
ul.menu2 li a.indigo:hover {background:#5b1092;}
ul.menu2 li a.violet:hover {background:#8a2be2;}
Izveidojam jaunu bloku un šo liekam iekšā:
<h2>Vertical Tabs Menu</h2>
<div class="menuHolder2">
<ul class="menu2">
<li><a href="" class="red">Главная</a></li>
<li><a href="" class="orange">Форум</a></li>
<li><a href="" class="yellow">Новости</a></li>
<li><a href="" class="green">Блог</a></li>
<li><a href="" class="blue">Картинки</a></li>
<li><a href="" class="indigo">Музыка</a></li>
<li><a href="" class="violet">Видео</a></li>
</ul>
<div class="shadow"></div>
</div>
<br class="clear" />
Pielāgojam visu kas vajadzigs.
|
|
Skatījumu skaits: 1045 |
Pievienoja: digital
| Reitings: 0.0/0 |
Līdzīgi materiāli
| |
 | |  |
|
| Statistika |
|
Kopā Online: 3 Viesi: 3 Lietotāji: 0 | |
|
|
