Печать

Простое меню css3 с интересным эффектом

Автор: Алексей Елизаров.

Горизонтальное меню для сайта на чистом css3 с интересным эффетом при наведении.




Просмотр Скачать

В меню включено:
  • Несколько цветовых схем
  • Кросс-браузер совместимое
  • Соответствие стандартам

Код HTML

<ul id="blue">
    <li class="current"><a href="#"  title="">Home<span>This takes you to the welcome page of the website - the starting point for everything.</span></a></li>
    <li><a href="#" title="">About Us<span>We are a great team of people, with lots of fantastic things to offer.</span></a></li>
    <li><a href="#" title="">Portfolio<span>Our portfolio showcases all the work that we've done for the past few weeks.</span></a></li>
    <li><a href="#" title="">Music<span>We also love to listen to some tunes while we work. Here we're sharing them with you all!</span></a></li>
    <li><a href="#" title="">Contact Us<span>If you would like to get in touch with us, you can do so here via email or telephone.</span></a></li>
  </ul>
  
  
<br />

  <ul id="green">
    <li class="current"><a href="#" title="">Home<span>This takes you to the welcome page of the website - the starting point for everything.</span></a></li>
    <li><a href="#" title="">About Us<span>We are a great team of people, with lots of fantastic things to offer.</span></a></li>
    <li><a href="#" title="">Portfolio<span>Our portfolio showcases all the work that we've done for the past few weeks.</span></a></li>
    <li><a href="#" title="">Music<span>We also love to listen to some tunes while we work. Here we're sharing them with you all!</span></a></li>
    <li><a href="#" title="">Contact Us<span>If you would like to get in touch with us, you can do so here via email or telephone.</span></a></li>
  </ul>
  
  
  
  
<br />

  <ul id="red">
    <li class="current"><a href="#" title="">Home<span>This takes you to the welcome page of the website - the starting point for everything.</span></a></li>
    <li><a href="#" title="">About Us<span>We are a great team of people, with lots of fantastic things to offer.</span></a></li>
    <li><a href="#" title="">Portfolio<span>Our portfolio showcases all the work that we've done for the past few weeks.</span></a></li>
    <li><a href="#" title="">Music<span>We also love to listen to some tunes while we work. Here we're sharing them with you all!</span></a></li>
    <li><a href="#" title="">Contact Us<span>If you would like to get in touch with us, you can do so here via email or telephone.</span></a></li>
  </ul>

Код CSS

ul#blue { margin:0; padding:0; list-style-type:none; }

ul#blue li { position:relative; float:left; border-top:4px solid #efefef; margin-right: 15px; padding-right: 20px; padding-top: 5px;}

ul#blue .current { border-top:4px solid #3d496a;}

ul#blue li:hover { border-top:4px solid #3d496a;}

ul#blue li a { padding:2px 2px; text-decoration:none; font:bold 12px Verdana, Georgia, "Times New Roman", Times, serif; color:#68759c;}

ul#blue li a:hover { color:#8895b8; border:none; }

ul#blue li span{ display:none; position:absolute; top:20px; left:2px; width:160px; font:normal 9px Verdana, Georgia, "Times New Roman", Times, serif; line-height: 15px; }

ul#blue li a:hover span {margin-top: 7px; display:block; color: #8895b8;}






ul#green { margin:0; padding:0; list-style-type:none; }

ul#green li { position:relative; float:left; border-top:4px solid #d7ebd5; margin-right: 15px; padding-right: 20px; padding-top: 5px;}

ul#green .current { border-top:4px solid #3c633c;}

ul#green li:hover { border-top:4px solid #3c633c;}

ul#green li a { padding:2px 2px; text-decoration:none; font:bold 12px Verdana, Georgia, "Times New Roman", Times, serif; color:#3d6c3d;}

ul#green li a:hover { color:#89be89; border:none; }

ul#green li span{ display:none; position:absolute; top:20px; left:2px; width:160px; font:normal 9px Verdana, Georgia, "Times New Roman", Times, serif;  line-height: 15px;}

ul#green li a:hover span {margin-top: 7px; display:block; color: #89be89;}






ul#red { margin:0; padding:0; list-style-type:none; }

ul#red li { position:relative; float:left; border-top:4px solid #edcbcb; margin-right: 15px; padding-right: 20px; padding-top: 5px;}

ul#red .current { border-top:4px solid #953434;}

ul#red li:hover { border-top:4px solid #953434;}

ul#red li a { padding:2px 2px; text-decoration:none; font:bold 12px Verdana, Georgia, "Times New Roman", Times, serif; color:#953434;}

ul#red li a:hover { color:#b17878; border:none; }

ul#red li span{ display:none; position:absolute; top:20px; left:2px; width:160px; font:normal 9px Verdana, Georgia, "Times New Roman", Times, serif;  line-height: 15px;}

ul#red li a:hover span {margin-top: 7px; display:block; color: #b17878;}
Источник
Нравится