ORT*OFIX Ceturtdiena, 26.12.2024, 09:24

Sveicināti Viesis | RSS


Galvenie | Reģistrācija | Ieeja

Vietnes izvēlne
Ieejas forma

Mūsu banneris
Mēs būsim pagodināti, ja paņemsi musu banneri savai lapai.

Interesantas lietas



Mūsu apmaklētājs

Laipni lūdzam, Viesis

Galvenie » 2013 » Decembris » 13 » Interesants menju
19:24
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: 1007 | Pievienoja: digital | Reitings: 0.0/0
Komentāru kopskaits: 0

Līdzīgi materiāli





Pievienot komentārus var tikai reģistrēti lietotāji.
[ Reģistrācija | Ieeja ]
Kalendārs
«  Decembris 2013  »
PrOTCPkSSv
      1
2345678
9101112131415
16171819202122
23242526272829
3031
Ierakstu arhīvs
Vietnes draugi
Все для веб мастера
Soft-new, Фильмы, Soft, Games, Музыка Web-мастер !!
Всё для вебмастера
ТОП рейтинг лучших сайтов
MEGA-ToP-ТОП раскрутка раскрутка сайтов.
Google-Add.com - Открытый Каталог Сайтов
Graffiti Decorations® Studio ™ Site Promoter
Statistika
Kopā Online: 1
Viesi: 1
Lietotāji: 0
Privāta mājas lapa © 2013-2024
Sveicināti, viesi!
Ja Jūs redziet šo ziņojumu, tātad Jūs neesiet veicis reģistrāciju. Reģistrējaties vai autorizējaties.
@ ort administrācija
Ienākt @ ort.ucoz.lv
\Ieteikt