ИЗБРАННЫЕ ПРИМЕРЫ JAVASCRIPT+CSS 2013 года

Библиотека javascript SE@RCHER ИЗБРАННЫЕ ПРИМЕРЫ 2013 г. ЯНВАРЬ >>>

HTML ↴

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Горизонтальное меню с анимацией линков (transition CSS 3)</title>
<style type='text/css'>
body {
padding: 0;
margin: 0;
}
#menu, #menu ul {
/* Remove bullet points and add fonts */
list-style: none;
width: 970px;
position: relative;
top: 50px;
margin: 0px auto;
font-family: Helvetica, Arial, sans-serif;
}

#menu li {
/* Horizontal menu, not vertical. Then just a little extra positioning */
float: left;
position: relative;
overflow: hidden;
margin-right: 20px;
height: 40px;

}

#menu li a {
/* Clear up the links and position them correctly */
color: #000;
padding: 0 15px;
text-decoration: none;
display: block;
position: relative;
height: 40px;
padding: 10px 15px;
font-weight: bold;
/* Quick animations to animate the anchor */
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
}

#menu li span {
/* Default width of the span (acts as border). Z-index so it appears behind the words. */
width: 6px;
z-index: -1;
/* Position it absolutely so it goes where we want it to go */
position: absolute;
left: 0;
top: 0;
height: 100%;
/* Animation again, because both the span and the anchor will be animated */
-webkit-transition: all 0.4s ease-in;
-moz-transition: all 0.4s ease-in;
-ms-transition: all 0.4s ease-in;
}

#menu li:nth-of-type(1) span { background: #c04545; }
#menu li:nth-of-type(2) span { background: #c06b45; }
#menu li:nth-of-type(3) span { background: #88c045; }
#menu li:nth-of-type(4) span { background: #48c045; }
#menu li:nth-of-type(5) span { background: #45c0aa; }
#menu li:nth-of-type(6) span { background: #4576c0; }
#menu li:nth-of-type(7) span { background: #7945c0; }

#menu li:hover > span {
min-width: 100%;
}

#menu li a:hover {
color: #fff;
}

#menu .sub-menu li {
padding: 10px;
float: left;
}

#menu li:hover {
box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);
}

#header {
background: #000;
padding: 20px;
color: #fff;
}

#header a {
opacity: 1 !important;
color: #fff;
font-family: 'Myriad Pro', Helvetica, Arial, sans-serif;
font-size: 20px;
font-weight: bold;
text-decoration: none;
}

#header img {
width: 150px;
height: 33px;
float: none;
}
</style>
</head>
<body>
<ul id="menu">
  <li> <a href="http://www03www.ru/"> HOME </a> <span></span> </li>
  <li> <a href="http://www03www.ru/"> ARTICLES </a> <span></span> </li>
  <li> <a href="http://www03www.ru/"> TUTORIALS </a> <span></span> </li>
  <li> <a href="http://www03www.ru/"> RESOURCES </a> <span></span> </li>
  <li> <a href="http://www03www.ru/"> SNIPPETS </a> <span></span> </li>
  <li> <a href="http://www03www.ru/"> WORDPRESS </a> <span></span> </li>
  <li> <a href="http://www03www.ru/"> INSPIRATION </a> <span></span> </li>
</ul>

<script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(53156500, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/53156500" style="position:absolute; left:-9999px;" alt="" /></div></noscript> </body>
</html>

ИЗБРАННЫЕ ПРИМЕРЫ JAVASCRIPT+CSS 2013 года

HTML ↴

размер Kb

ПРИМЕР ↴

✔ пример в полном окне