Горизонтальное меню При наведении на линк снизу вверх появляется фото вместо текста

1997

Библиотека JAVASCRIPT SE@RCHER

Javascript + CSS :: • блок • текст • линк • меню • фото • окно • кнопка • фон • видео • таблица

HTML ↴ размер Kb

<!DOCTYPE html>
<html>
<head>
<title>Горизонтальное меню При наведении на линк снизу вверх появляется фото вместо текста</title>
<style type="text/css">
/* Сброс CSS */
* {
padding: 0;
margin: 0;
}
#ruseller {
height: 16px;
background: #e4e0e0;
font: .14px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
text-align: center;
}
#ruseller a {
text-decoration: none;
}
#ruseller a:hover {
text-decoration: underline;
}
/* Основные стили меню */
#menu {
height: 480px; width: 930px;
    overflow: hidden;
    margin: 20px auto;
    text-align: center;
}
#menu ul li {
float: left;
margin: 0 5px;
list-style-type: none;
}
/* Стили ссылок меню */
#menu ul a.top {
background: #e70f23;
color: #fff;
font: lighter 2em/100px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
#menu ul a {
display: block;
background: #000; color: #fff;
height: 480px; width: 300px;
font: lighter 14px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
text-decoration: none;

-webkit-transition: margin .4s ease-in-out;
-moz-transition: margin .4s ease-in-out;
-o-transition: margin .4s ease-in-out;
-ms-transition: margin .4s ease-in-out;
transition: margin .4s ease-in-out;
}
/* Смена при наведении курсора мыши на пункт меню */
#menu ul li:hover .top {
margin-top: -480px;
}
</style>
</head>
<body>
 <div id="menu">
    <ul>
        <li><a href="#" class="top">Фото 1<br><img src="1.jpg" width="80" alt=""></a><a href="1.jpg">Фото 1<br><img src="001.jpg" width="300" alt=""></a></li>
        <li><a href="#" class="top">Фото 2<br><img src="2.jpg" width="80" alt=""></a><a href="2.jpg">Фото 2<br><img src="002.jpg" width="300" alt=""></a></li>
        <li><a href="#" class="top">Фото 3<br><img src="3.jpg" width="80" alt=""></a><a href="3.jpg">Фото 3<br><img src="003.jpg" width="300" alt=""></a></li>
    </ul>
</div>
 <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>

ПРИМЕР ↴

на главную страницу примеров сентября 2012 г. - клавиша ESC

Javascript + CSS :: • до 2005 г. • 2006 г.• 2007 г.• 2008 г.• 2009 г. • 2010 г. • 2011 г. • 2012 г.

document.write(document.title)

HTML ↴ размер Kb

ПРИМЕР ↴