Beautiful top-menu

This commit is contained in:
Андрей 2020-11-19 16:30:45 +04:00 committed by GitHub
parent ac3532dd5e
commit eb52b56c15
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 122 additions and 13 deletions

85
css/style.css Normal file
View file

@ -0,0 +1,85 @@
@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@500&display=swap');
body {
padding: 0;
}
.menu {
position: fixed;
width: 100%;
z-index: 100;
font-size: 18px;
font-family: 'Exo 2', sans-serif;
background-color: #cecdd9;
color: #514b90;
top: 0;
left: 0;
}
.menu ul {
list-style: none;
margin: 0;
padding: 0;
box-shadow: 0 5px 5px gray;
}
.menu ul li {
color: #514b90;
display: inline-block;
position: relative;
text-transform: uppercase;
padding-top: 5px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 5px;
transition: color 0.45s ease-in-out;
}
.menu ul li a {
color: #514b90;
text-decoration: none;
}
.menu ul.top-menu > li {
padding-left: 10px;
font-size: 20px;
}
.androit-green { color: green; }
.androit-white { color: white; }
.menu ul.top-menu > li > a {
color: #514b90;
transition: color 0.45s ease-in-out;
}
.menu ul.top-menu > li:hover > a {
color: #0e0939;
transition: color 0.45s ease-in-out;
}
.dropdown-menu {
list-style: none;
position: absolute;
left: 0;
width: 200px;
visibility: hidden;
backface-visibility: hidden;
opacity: 0;
z-index: 200;
font-size: 18px;
background-color: #aea9c5;
border-radius: 5px;
transform-origin: left top;
transform: perspective(600px) rotateX(-90deg);
transition: 0.6s ease-in-out;
}
.dropdown-menu li {
display: block !important;
}
.top-menu > #myproj-item:hover .dropdown-menu {
visibility: visible;
opacity: 1;
transform: perspective(600px) rotateX(0deg);
}
.main-content {
padding-top: 40px;
font-size: 18px;
font-family: sans-serif;
}

View file

@ -1,13 +1,37 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset = "UTF-8" /> <meta charset="UTF-8" />
<title>Веб-сайт Андрея (DarkCat09/CodePicker13)</title> <title>Сайт DarkCat09</title>
</head> <link rel="stylesheet" href="css/style.css" />
<body> </head>
<p> <body>
Пока что здесь пусто.<br /> <nav class="menu">
Посмотрите <a href = "https://github.com/DarkCat09">мой профиль GitHub</a> - там много интересных проектов! &#9786 <ul class="top-menu">
</p> <li><a href="#">(Логотип) Главная</a></li>
</body> <li><a href="#about-me">Обо мне</a></li>
</html> <li id="myproj-item">
<a href="https://github.com/DarkCat09">Проекты &#9776;</a>
<ul class="dropdown-menu">
<li><a href="https://github.com/DarkCat09/AchSmartHome">AchSmartHome</a></li>
<li><a href="https://github.com/IngCenter/SMM">SMM</a></li>
<li><a href="https://github.com/DarkCat09/RegFileMaker">RegFileMaker</a></li>
<li><a href="https://github.com/DarkCat09/MtkFwTools">MtkFwTools</a></li>
<li><a href="https://github.com/IngCenter/FallSimulator">FallSimulator</a></li>
<li><a href="https://github.com/DarkCat09/PassGen">PassGen</a></li>
<li><a href="https://github.com/DarkCat09/Cash_Machine">Cash_Machine</a></li>
<li><a href="https://github.com/DarkCat09/RRJS">RRJS</a></li>
</ul>
</li>
<li id="androit-item"><a href="#"><span class="androit-green">Andro</span><span class="androit-white">IT</span></a></li>
<li><a href="http://minespace-world.000webhostapp.com/">Minecraft</a></li>
<li><a href="#">Плавание</a></li>
</ul>
</nav>
<div class="main-content">
Сайт всё ещё не готов. Пока что можете посмотреть
<a href="https://github.com/DarkCat09">мой профиль на GitHub</a>
- там действительно много интересных проектов&#9786;
</div>
</body>
</html>