From eb52b56c1576df8eca296cd8a91a6653c2d6cc62 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=90=D0=BD=D0=B4=D1=80=D0=B5=D0=B9?= <50486086+DarkCat09@users.noreply.github.com> Date: Thu, 19 Nov 2020 16:30:45 +0400 Subject: [PATCH] Beautiful top-menu --- css/style.css | 85 +++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 50 ++++++++++++++++++++++-------- 2 files changed, 122 insertions(+), 13 deletions(-) create mode 100644 css/style.css diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..7d2ed60 --- /dev/null +++ b/css/style.css @@ -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; +} diff --git a/index.html b/index.html index bfbd508..30a4f28 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,37 @@ - - -
- -
-Пока что здесь пусто.
-Посмотрите мой профиль GitHub - там много интересных проектов! ☺
-