Interactive Hover Menu
HTML документ, който включва вградени стилове (CSS).
Този код създава една HTML страница с изображение и скрито меню, което се показва при задържане на курсора над изображението. Използвайки промените в стиловете, изгледът става по-модерен и привлекателен.
Вградените CSS стилове контролират показването, анимациите и позиционирането на различните елементи, докато HTML структурата осигурява съдържанието и оформлението на страницата. В резултат на това, при задържане на курсора върху изображението, менюто се показва, изображението се затъмнява и придвижва надясно, а връзките в менюто стават по-ярки при задържане на курсора върху тях.
Поздрави , Тони!
ВИЖ ДЕМО
HTML документ, който включва вградени стилове (CSS).
HTML:
<!DOCTYPE html>
<!--
Toni Angelchovski HTML5
angelchovski.com |@bgwelding
-->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hover Menu</title>
<style>
.hover-menu {
position: relative;
overflow: hidden;
margin: 8px;
min-width: 340px;
max-width: 480px;
max-height: 290px;
width: 100%;
background: #000;
text-align: center;
box-sizing: border-box;
}
.hover-menu * {
box-sizing: border-box;
}
.hover-menu img {
position: relative;
max-width: 100%;
top: 0;
right: 0;
opacity: 1;
transition: 0.3s ease-in-out;
}
.hover-menu div {
position: absolute;
top: 0;
left: -120px;
width: 120px;
height: 100%;
padding: 8px 4px;
background: rgba(0, 0, 0, 0.8);
transition: 0.3s ease-in-out;
display: flex;
flex-direction: column;
justify-content: center;
}
.hover-menu div a {
display: block;
line-height: 2;
color: #fff;
text-decoration: none;
opacity: 0.8;
padding: 5px 15px;
position: relative;
transition: 0.3s ease-in-out;
}
.hover-menu div a:hover {
text-decoration: underline;
opacity: 1;
}
.hover-menu:hover img {
opacity: 0.5;
right: -120px;
}
.hover-menu:hover div {
left: 0;
opacity: 1;
}
</style>
</head>
<body>
<figure class="hover-menu">
<img src="pic.png"/>
<div>
<a href="https://dtgarage.eu/">ДТ Работилница</a>
<a href="https://dtgarage.eu/forums/">Форуми</a>
<a href="#">За Нас</a>
</div>
</figure>
</body>
</html>Този код създава една HTML страница с изображение и скрито меню, което се показва при задържане на курсора над изображението. Използвайки промените в стиловете, изгледът става по-модерен и привлекателен.
Вградените CSS стилове контролират показването, анимациите и позиционирането на различните елементи, докато HTML структурата осигурява съдържанието и оформлението на страницата. В резултат на това, при задържане на курсора върху изображението, менюто се показва, изображението се затъмнява и придвижва надясно, а връзките в менюто стават по-ярки при задържане на курсора върху тях.
Поздрави , Тони!
ВИЖ ДЕМО