I am a beginner and I am learning HTML and CSS. I am trying to make a webpage but the menu of the webpage is not working fully.
There is another menu in the main menu like the nested menu (I actually don't know what it is called). The first menu is working perfectly but the nested menu is not working. I want, if I click on the Menu option, which is indicated in the image, the second menu appears over the first menu.
The red mark on the image is the link to the second menu.
My menu will be like Starbucks menu which appears when the width is 768px.
My Codes:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
html, body {
overflow-x: hidden;
height: 100%;
}
.header {
background-color: #fff;
width: 100%;
height: 83px;
position: fixed;
z-index: 10;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.header {
display: flex;
align-items: center;
}
.header .logo {
padding-left: 2rem;
}
.header .logo img {
width: 50px;
}
.toogle-menu {
width: 25px;
height: 25px;
position: absolute;
top: 25px;
right: 2rem;
z-index: 20;
cursor: pointer;
}
.spinner {
background-color: #000;
height: 3px;
margin: 5px 0;
transition: all 0.3s ease;
}
#menu:checked ~ .toogle-menu > .spinner.middle {
opacity: 0;
}
#menu:checked ~ .toogle-menu > .spinner.top {
transform: rotate(135deg);
margin-top: 15px;
}
#menu:checked ~ .toogle-menu > .spinner.bottom {
transform: rotate(-135deg);
margin-top: -16px;
}
#menu:checked ~ .sidebarMenu, .nested-menu a #nested:checked ~ .menu-2 {
transform: translateX(0);
}
.sidebarMenu, .menu-2 {
height: 100%;
width: 80vw;
margin-top: 83px;
position: fixed;
top: 0;
right: 0;
background-color: #fff;
border-left: 1px solid rgb(235, 227, 227);
transform: translateX(80vw);
transition: all 0.3s ease;
}
.sidebarMenu ul, .menu-2 ul {
padding: 1rem 2rem 3rem 2rem;
}
.sidebarMenu ul li, .menu-2 ul li {
margin-bottom: 2rem;
}
.sidebarMenu ul li a, .menu-2 ul li a {
color: #000;
font-size: 24px;
}
.nested-menu a label {
display: flex;
justify-content: space-between;
font-size: 24px;
cursor: pointer;
}
.nested-menu a input {
visibility: hidden;
}
.btn-list {
margin-top: 2rem;
}
.btn {
padding: 7px 16px !important;
border: 1px solid #000 !important;
font-size: 16px !important;
border-radius: 30px !important;
color: #1E3932 !important;
font-weight: 500 !important;
}
.btn-black {
background-color: #000 !important;
color: #fff !important;
margin-left: 1rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hamburger Menu</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="mobile-menu">
<div class="header">
<div class="logo">
<img src="./starbucks-logo.png" alt="">
</div>
</div>
<input type="checkbox" id="menu">
<label for="menu" class="toogle-menu">
<div class="spinner top"></div>
<div class="spinner middle"></div>
<div class="spinner bottom"></div>
</label>
<div class="sidebarMenu">
<ul>
<li class="nested-menu">
<a href="#">
<input type="checkbox" id="nested">
<label for="nested">Menu <i class="fas fa-chevron-right"></i></label>
</a>
</li>
<li>Rewards</li>
<li>Gift Cards</li>
<hr>
<li class="btn-list">
Sign in
Join now
</li>
<li class="location"><i class="fas fa-map-marker-alt"></i> Find a store</li>
</ul>
</div>
<div class="menu-2">
<ul>
<li>All Orders</li>
<li>Featured</li>
<li>Previous Orders</li>
<li>Favorite Products</li>
</ul>
</div>
</div>
</body>
</html>
Why it is not working?
How can I fix the issue and what is the solution?
Place .menu-2 with the next item after <input type="checkbox" id="nested" />.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
html,
body {
overflow-x: hidden;
height: 100%;
}
.header {
background-color: #fff;
width: 100%;
height: 83px;
position: fixed;
z-index: 10;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.header {
display: flex;
align-items: center;
}
.header .logo {
padding-left: 2rem;
}
.header .logo img {
width: 50px;
}
.toogle-menu {
width: 25px;
height: 25px;
position: absolute;
top: 25px;
right: 2rem;
z-index: 20;
cursor: pointer;
}
.spinner {
background-color: #000;
height: 3px;
margin: 5px 0;
transition: all 0.3s ease;
}
#menu:checked ~ .toogle-menu > .spinner.middle {
opacity: 0;
}
#menu:checked ~ .toogle-menu > .spinner.top {
transform: rotate(135deg);
margin-top: 15px;
}
#menu:checked ~ .toogle-menu > .spinner.bottom {
transform: rotate(-135deg);
margin-top: -16px;
}
#nested {
display: none;
}
#menu:checked ~ .sidebarMenu,
.nested-menu #nested:checked ~ .menu-2 {
transform: translateX(0);
}
.sidebarMenu,
.menu-2 {
height: 100%;
width: 80vw;
margin-top: 83px;
position: fixed;
top: 0;
right: 0;
background-color: #fff;
border-left: 1px solid rgb(235, 227, 227);
transform: translateX(80vw);
transition: all 0.3s ease;
}
.sidebarMenu ul,
.menu-2 ul {
padding: 1rem 2rem 3rem 2rem;
}
.sidebarMenu ul li,
.menu-2 ul li {
margin-bottom: 2rem;
}
.sidebarMenu ul li > *,
.menu-2 ul li a {
color: #000;
font-size: 24px;
cursor: pointer;
}
.nested-menu a label {
display: flex;
justify-content: space-between;
font-size: 24px;
cursor: pointer;
}
.nested-menu a input {
visibility: hidden;
}
.btn-list {
margin-top: 2rem;
}
.btn {
padding: 7px 16px !important;
border: 1px solid #000 !important;
font-size: 16px !important;
border-radius: 30px !important;
color: #1e3932 !important;
font-weight: 500 !important;
}
.btn-black {
background-color: #000 !important;
color: #fff !important;
margin-left: 1rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hamburger Menu</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous" />
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<div class="mobile-menu">
<div class="header">
<div class="logo">
<img src="./starbucks-logo.png" alt="" />
</div>
</div>
<input type="checkbox" id="menu" />
<label for="menu" class="toogle-menu">
<div class="spinner top"></div>
<div class="spinner middle"></div>
<div class="spinner bottom"></div>
</label>
<div class="sidebarMenu">
<ul>
<li class="nested-menu">
<input type="checkbox" id="nested" />
<label for="nested">Menu <i class="fas fa-chevron-right"></i></label>
<div class="menu-2">
<ul>
<li>All Orders</li>
<li>Featured</li>
<li>Previous Orders</li>
<li>Favorite Products</li>
</ul>
</div>
</li>
<li>Rewards</li>
<li>Gift Cards</li>
<hr />
<li class="btn-list">
Sign in
Join now
</li>
<li class="location">
<i class="fas fa-map-marker-alt"></i> Find a store
</li>
</ul>
</div>
</div>
</body>
</html>
Related
I'm following a free code camp video on personal portfolio, i'm stuck with icons class. I need to add color, font-size for the active icon (i am currently using scss), up to now i am not able to apply any specific style (color and font-size) to ' i ' What am i doing the wrong way? Please need help
enter image description here
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
}
:root {
--color-primary: #191d2b;
--color-secondary: #27ae60;
--color-white: #fff;
--color-black: #000;
--color-grey-0:#f8f8f8;
--color-grey-1: #dbe1e8;
--color-grey-2: #b2becd;
--color-grey-3: #6c7983;
--color-grey-4: #454e56;
--color-grey-5: #2a2e35;
--color-grey-6: #12181b;
--br-sm-2: 14px
--box-shadow-1: 0 3px 15px rgba(0,0,0,.3);
}
body {
font-family: 'Poppins', sans-serif;
background-color: var(--color-primary);
font-size: 1.1rem;
color: var(--color-white);
transition: all .4s ease-in-out;
}
a {
display: inline-block;
text-decoration: none;
color: inherit;
font-family: inherit;
}
header {
height: 100vh;
color: var(--color-white);
overflow: hidden;
}
section {
min-height: 100vh;
width: 100%;
top: 0;
left: 0;
position: absolute;
padding: 3rem 18rem;
}
.section {
transform: translateY(-100%) scale(0);
transition: all .4s ease-in-out;
background-color: var(--color-primary);
}
.sec1 {
display: none;
transform: translateY(0) scale(1);
}
.sec2 {
display: none;
transform: translateY(0) scale(1);
}
.sec3 {
display: none;
transform: translateY(0) scale(1);
}
.sec4 {
display: none;
transform: translateY(0) scale(1);
}
.sec5 {
display: none;
transform: translateY(0) scale(1);
}
//controls
.controlls {
position: fixed;
z-index: 10;
top: 50%;
right: 3%;
display: flex;
flex-direction: column;
align-items: center;
align-content: center;
transform: translateY(-50%);
/*HERE IS THE CODE*/
.active-btn {
background-color: var(--color-secondary) !important;
transition: all .4s ease-in-out;
i {
color: var(--color-white) !important;
}
}
.control {
padding: 1rem;
cursor: pointer;
background-color: var(--color-grey-4);
width: 55px;
height: 55px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin: .7rem 0;
box-shadow: var(--box-shadow-1);
/*HERE IS THE CODE*/
i {
font-size: 1.2rem;
color: var(--color-grey-2);
pointer-events: none;
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio</title>
<link rel="stylesheet" href="../portfolio/css/styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght#0,400;0,500;0,600;0,700;0,800;1,400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body class="main-content">
<header class="section sec1 header active">
</header>
<main>
<section class="section sec2 about"></section>
<section class="section sec3 portfolio"></section>
<section class="section sec4 blogs"></section>
<section class="section sec5 contact"></section>
</main>
<div class="controlls">
<div class="control control-1 active-btn">
<i class="fas fa-home"></i>
</div>
<div class="control control-2">
<i class="fas fa-user"></i>
</div>
<div class="control control-3">
<i class="fas fa-briefcase"></i>
</div>
<div class="control control-4">
<i class="fas fa-newspaper"></i>
</div>
<div class="control control-5">
<i class="fas fa-envelope-open"></i>
</div>
</div>
</body>
</html>
You are using SASS or SCSS with nested classes in a CSS file. The file extension should be .sass or the stylesheet must be coded according to the following CSS syntax
body {
margin: 0;
background: #F2F2F2;
font-family: "Montserrat", sans-serif;
height: 100vh;
}
#container {
display: grid;
grid-template-columns: 70px auto;
height: 100%;
}
#container #content {
padding: 30px 50px;
}
#container #content ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#container #content ul li {
background: #fff;
border-radius: 8px;
padding: 20px;
margin-bottom: 8px;
}
#container #content ul li a {
font-size: 1.5em;
text-decoration: none;
font-weight: bold;
color: #00A8FF;
}
#container #content ul li ul {
margin-top: 20px;
}
#container #content ul li ul li {
padding: 0;
}
#container #content ul li ul li a {
font-size: 1em;
font-weight: 300;
}
I have just started trying to learn to code.
I have tried to replicate the google homepage as part of an online course. This is HTML and CSS, however I have ran into the following issue.
Context: I added the border in css for my own sake, so I can see where and how much space the center is taking.
Here is the code in a snippet:
body,
html {
background-color: white;
font-size: 1em;
width: 100%;
max-width: 2400px;
max-height: 100vh;
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
height: 100vh;
position: fixed;
}
.navigation {
list-style: none;
overflow: hidden;
width: 100%;
background-color: white;
height: 8vh;
display: block;
text-align: right;
}
.navigation li {
display: inline-block;
font-size: .9em;
}
.navigation li a {
padding: 7px;
text-decoration: none;
color: black;
justify-content: center;
}
.navigation li a:hover {
cursor: pointer;
text-decoration: underline;
}
.navimage {
border-radius: 50%;
border: 5px solid transparent;
}
#user-image {
margin-right: 1em;
}
.navimage:hover {
border-color: #E8E8E8;
cursor: pointer;
}
.center {
width: 100%;
height: 84vh;
text-align: center;
border: 1px solid green;
}
.google-logo {
margin-top: 10em;
margin-bottom: 1em;
}
.search input {
margin-top: 1em;
margin-bottom: 1em;
border: 2px solid #d3d3d3;
width: 28%;
height: 40px;
border-radius: 30px;
font-size: 1.4em;
padding-left: 50px;
padding-right: 40px;
color: black;
}
input:hover {
box-shadow: 3px violet;
}
#magnifier-glass {
position: absolute;
margin-top: 36px;
margin-left: 20px;
}
#microphone {
position: absolute;
margin-top: 36px;
margin-left: -36px;
}
#lucky {
width: 100%;
}
.btn {
background-color: #f0f0f0;
width: 8%;
height: 40px;
border-radius: 5px;
margin: 10px;
border-color: transparent;
font-size: 15px;
}
.btn:hover {
box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
cursor: pointer;
}
footer {
width: 100%;
height: 8vh;
justify-content: space-between;
background-color: #E8E8E8;
display: flex;
position: fixed;
z-index: 1;
border: 1px solid red;
}
footer ul {
list-style: none;
}
footer ul li {
display: inline-block;
margin: 5px;
padding-top: 25px;
}
footer ul li a {
text-decoration: none;
font-size: 1em;
color: #686868;
}
footer ul li a:hover {
text-decoration: underline;
}
.footer-right {
margin-right: 30px !important;
}
.footer-left {
margin-left: -15px !important;
}
<!DOCTYPE html>
<html lang="eng">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/png" href="images/title-logo.png">
<title>Google</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!-- NAVBAR-->
<header>
<navbar class="navigation">
<ul>
<li>
Gmail
</li>
<li>
Images
</li>
<li>
<img class="navimage" width="30" style="vertical-align:middle" src="images/Apps-Google-Chrome-App-List-icon.png">
</li>
<li>
<img id="user-image" class="navimage" width="30" style="vertical-align:middle" src="images/userimage.jpg">
</li>
</ul>
</navbar>
</header>
<!-- SEARCH BAR / MAIN PAGE-->
<div class="center">
<div class="google-logo">
<img src="images/googlelogo_color_272x92dp.png">
</div>
<div class="search">
<i id="magnifier-glass" class="fa fa-search" aria-hidden="true"></i>
<input type="text" class="searchGoogle" placeholder="">
<i id="microphone" class="fa fa-microphone" aria-hidden="true"></i>
</div>
<div id="lucky">
<button class="btn" type="button">Google Search</button>
<button class="btn" type="button">I'm Feeling Lucky</button>
</div>
</div>
<!--FOOTER-->
<footer>
<ul class="footer-left">
<li>
About
</li>
<li>
Advertising
</li>
<li>
Business
</li>
<li>
How Search works
</li>
</ul>
<ul class="footer-right">
<li>
Privacy
</li>
<li>
Terms
</li>
<li>
Settings
</li>
</ul>
</footer>
</body>
</html>
I know the CSS is probably bad as it is too large.
But my main concern is: why does the footer disappear when I remove the border from the center div?
Yes, I tried to remove and modify but I can't figure out what is messing it up (apart from me doing it all wrong).
Thank you for your help.
The footer doesn't disappear, it just drops further down so it doesn't appear on the screen and you don't set overflow:auto to body so you can't see it by scrolling.
By the way, it caused by .google-logo's margin. Try deleting it.
Second way, to fix this, see this example. I gave overflow:auto and fixed a bit of CSS for the footer to make it neater by removing position and height.
body, html {
background-color: white;
font-size: 1em;
width: 100%;
max-width: 2400px;
max-height: 100vh;
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
height: 100vh;
position: fixed;
overflow: auto;
}
.navigation {
list-style: none;
overflow: hidden;
width: 100%;
background-color: white;
height: 8vh;
display: block;
text-align: right;
}
.navigation li {
display: inline-block;
font-size: .9em;
}
.navigation li a {
padding: 7px;
text-decoration: none;
color: black;
justify-content: center;
}
.navigation li a:hover{
cursor: pointer;
text-decoration: underline;
}
.navimage {
border-radius: 50%;
border: 5px solid transparent;
}
#user-image{
margin-right: 1em;
}
.navimage:hover {
border-color: #E8E8E8;
cursor: pointer;
}
.center {
width: 100%;
height: 84vh;
text-align: center;
}
.google-logo {
margin-top: 10em;
margin-bottom: 1em;
}
.search input {
margin-top: 1em;
margin-bottom: 1em;
border: 2px solid #d3d3d3;
width: 28%;
height: 40px;
border-radius: 30px;
font-size: 1.4em;
padding-left: 50px;
padding-right: 40px;
color: black;
}
input:hover {
box-shadow: 3px violet;
}
#magnifier-glass {
position:absolute;
margin-top: 36px;
margin-left: 20px;
}
#microphone {
position: absolute;
margin-top: 36px;
margin-left: -36px;
}
#lucky {
width: 100%;
}
.btn {
background-color: #f0f0f0;
width: 8%;
height: 40px;
border-radius: 5px;
margin: 10px;
border-color: transparent;
font-size: 15px;
}
.btn:hover{
box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
cursor: pointer;
}
footer {
width: 100%;
height: auto;
justify-content: space-between;
background-color: #E8E8E8;
display: flex;
z-index: +1;
}
footer ul {
list-style: none;
}
footer ul li {
display: inline-block;
margin: 5px;
padding-top: 25px;
}
footer ul li a {
text-decoration: none;
font-size: 1em;
color: #686868;
}
footer ul li a:hover{
text-decoration: underline;
}
.footer-right {
margin-right: 30px !important;
}
.footer-left {
margin-left: -15px !important;
}
<html lang="eng">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/png" href="images/title-logo.png">
<title>Google</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!-- NAVBAR-->
<header>
<navbar class="navigation">
<ul>
<li>
Gmail
</li>
<li>
Images
</li>
<li>
<img class="navimage" width="30" style="vertical-align:middle" src="images/Apps-Google-Chrome-App-List-icon.png">
</li>
<li>
<img id="user-image"class="navimage" width="30" style="vertical-align:middle" src="images/userimage.jpg">
</li>
</ul>
</navbar>
</header>
<!-- SEARCH BAR / MAIN PAGE-->
<div class="center">
<div class="google-logo">
<img src="images/googlelogo_color_272x92dp.png">
</div>
<div class="search">
<i id="magnifier-glass" class="fa fa-search" aria-hidden="true"></i>
<input type="text" class="searchGoogle" placeholder="">
<i id="microphone" class="fa fa-microphone" aria-hidden="true"></i>
</div>
<div id="lucky">
<button class="btn" type="button">Google Search</button>
<button class="btn" type="button">I'm Feeling Lucky</button>
</div>
</div>
<!--FOOTER-->
<footer>
<ul class="footer-left">
<li>
About
</li>
<li>
Advertising
</li>
<li>
Business
</li>
<li>
How Search works
</li>
</ul>
<ul class="footer-right">
<li>
Privacy
</li>
<li>
Terms
</li>
<li>
Settings
</li>
</ul>
</footer>
</body>
</html>
This question already has answers here:
Content overlapping with "position:fixed"
(1 answer)
How can I make content appear beneath a fixed DIV element?
(13 answers)
Closed 2 years ago.
Here is the code:
body {
margin: 0;
padding: 0;
}
/* NAVIGATION */
nav {
background: #222222;
padding: 10px 40px 10px 70px;
color: #ffffff;
}
header {
position: fixed;
width: 100%;
top: 0;
}
#nav-list {
display: flex;
list-style: none;
justify-content: space-around;
align-items: center;
padding-left: 0;
}
#search {
height: 40px;
width: 240px;
display: flex;
border-radius: 5px;
}
#searchBar {
height: 100%;
width: 200px;
border: none;
border-radius: 5px 0 0 5px;
outline: none;
padding: 0 10px;
color: #000;
font-size: 16px;
}
#search #searchButton {
height: 100%;
width: 40px;
line-height: 40px;
text-align: center;
border-radius: 0 5px 5px 0;
cursor: pointer;
background-color: rgb(81, 22, 219);
color: #222222;
transition: color 0.75s;
}
#search #searchButton:hover {
color: #fff;
}
#page-title {
font-size: 24px;
}
/* MAIN CONTENT */
#content {
/* test to see if the color will appear */
background: blue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Movie Vault</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<header>
<nav>
<ul id="nav-list">
<li id="search">
<input id="searchBar" type="search" placeholder="Search...">
<label id="searchButton">
<i class="fas fa-search"></i>
</label>
</li>
<li id="page-title">Video Vault</li>
</ul>
</nav>
</header>
<section>
test
</section>
</body>
</html>
The goal I am trying to achieve is having the text from the section tag and have it directly below my fixed navbar. I have attempted to put a z-index with the values of above 1 into header, nav and #nav-list, but it has not worked. What can be re-configured to make this work? I am sorry. I have tried all I know and searched this site but to no success.
I would just add a margin-top equivalent to the nav offsetHeight, which in this case is 106 pixels.
body {
margin: 0;
padding: 0;
}
/* NAVIGATION */
nav {
background: #222222;
padding: 10px 40px 10px 70px;
color: #ffffff;
}
header {
position: fixed;
width: 100%;
top: 0;
}
#nav-list {
display: flex;
list-style: none;
justify-content: space-around;
align-items: center;
padding-left: 0;
}
#search {
height: 40px;
width: 240px;
display: flex;
border-radius: 5px;
}
#searchBar {
height: 100%;
width: 200px;
border: none;
border-radius: 5px 0 0 5px;
outline: none;
padding: 0 10px;
color: #000;
font-size: 16px;
}
#search #searchButton {
height: 100%;
width: 40px;
line-height: 40px;
text-align: center;
border-radius: 0 5px 5px 0;
cursor: pointer;
background-color: rgb(81, 22, 219);
color: #222222;
transition: color 0.75s;
}
#search #searchButton:hover {
color: #fff;
}
#page-title {
font-size: 24px;
}
/* MAIN CONTENT */
#content {
/* test to see if the color will appear */
background: blue;
}
section{
margin-top:106px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Movie Vault</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<header>
<nav>
<ul id="nav-list">
<li id="search">
<input id="searchBar" type="search" placeholder="Search...">
<label id="searchButton">
<i class="fas fa-search"></i>
</label>
</li>
<li id="page-title">Video Vault</li>
</ul>
</nav>
</header>
<section>
test
</section>
</body>
</html>
If you have a responsive navigation bar you could use JS to dynamically set the margin top.
document.getElementsByTagName("section")[0].style.marginTop = document.getElementsByTagName("nav")[0].offsetHeight+"px";
body {
margin: 0;
padding: 0;
}
/* NAVIGATION */
nav {
background: #222222;
padding: 10px 40px 10px 70px;
color: #ffffff;
}
header {
position: fixed;
width: 100%;
top: 0;
}
#nav-list {
display: flex;
list-style: none;
justify-content: space-around;
align-items: center;
padding-left: 0;
}
#search {
height: 40px;
width: 240px;
display: flex;
border-radius: 5px;
}
#searchBar {
height: 100%;
width: 200px;
border: none;
border-radius: 5px 0 0 5px;
outline: none;
padding: 0 10px;
color: #000;
font-size: 16px;
}
#search #searchButton {
height: 100%;
width: 40px;
line-height: 40px;
text-align: center;
border-radius: 0 5px 5px 0;
cursor: pointer;
background-color: rgb(81, 22, 219);
color: #222222;
transition: color 0.75s;
}
#search #searchButton:hover {
color: #fff;
}
#page-title {
font-size: 24px;
}
/* MAIN CONTENT */
#content {
/* test to see if the color will appear */
background: blue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Movie Vault</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<header>
<nav>
<ul id="nav-list">
<li id="search">
<input id="searchBar" type="search" placeholder="Search...">
<label id="searchButton">
<i class="fas fa-search"></i>
</label>
</li>
<li id="page-title">Video Vault</li>
</ul>
</nav>
</header>
<section>
test
</section>
</body>
</html>
position: fixed; and position: absolute; puts the header out of the normal flow. use position: sticky; instead:
body {
margin: 0;
padding: 0;
}
/* NAVIGATION */
nav {
background: #222222;
padding: 10px 40px 10px 70px;
color: #ffffff;
}
header {
position: sticky;
width: 100%;
top: 0;
}
#nav-list {
display: flex;
list-style: none;
justify-content: space-around;
align-items: center;
padding-left: 0;
}
#search {
height: 40px;
width: 240px;
display: flex;
border-radius: 5px;
}
#searchBar {
height: 100%;
width: 200px;
border: none;
border-radius: 5px 0 0 5px;
outline: none;
padding: 0 10px;
color: #000;
font-size: 16px;
}
#search #searchButton {
height: 100%;
width: 40px;
line-height: 40px;
text-align: center;
border-radius: 0 5px 5px 0;
cursor: pointer;
background-color: rgb(81, 22, 219);
color: #222222;
transition: color 0.75s;
}
#search #searchButton:hover {
color: #fff;
}
#page-title {
font-size: 24px;
}
/* MAIN CONTENT */
#content {
/* test to see if the color will appear */
background: blue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Movie Vault</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<header>
<nav>
<ul id="nav-list">
<li id="search">
<input id="searchBar" type="search" placeholder="Search...">
<label id="searchButton">
<i class="fas fa-search"></i>
</label>
</li>
<li id="page-title">Video Vault</li>
</ul>
</nav>
</header>
<section>
test
</section>
</body>
</html>
Alternatively, you can use a top-margin at the section:
body {
margin: 0;
padding: 0;
}
/* NAVIGATION */
nav {
background: #222222;
padding: 10px 40px 10px 70px;
color: #ffffff;
}
header {
position: fixed;
width: 100%;
top: 0;
}
#nav-list {
display: flex;
list-style: none;
justify-content: space-around;
align-items: center;
padding-left: 0;
}
#search {
height: 40px;
width: 240px;
display: flex;
border-radius: 5px;
}
#searchBar {
height: 100%;
width: 200px;
border: none;
border-radius: 5px 0 0 5px;
outline: none;
padding: 0 10px;
color: #000;
font-size: 16px;
}
#search #searchButton {
height: 100%;
width: 40px;
line-height: 40px;
text-align: center;
border-radius: 0 5px 5px 0;
cursor: pointer;
background-color: rgb(81, 22, 219);
color: #222222;
transition: color 0.75s;
}
#search #searchButton:hover {
color: #fff;
}
#page-title {
font-size: 24px;
}
/* MAIN CONTENT */
#content {
/* test to see if the color will appear */
background: blue;
}
section {
margin-top: 90px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Movie Vault</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<header>
<nav>
<ul id="nav-list">
<li id="search">
<input id="searchBar" type="search" placeholder="Search...">
<label id="searchButton">
<i class="fas fa-search"></i>
</label>
</li>
<li id="page-title">Video Vault</li>
</ul>
</nav>
</header>
<section>
test
</section>
</body>
</html>
I'm relatively new to coding and I've been trying to make a responsive multi-list dropdown navbar. I have made the navbar using HTML and CSS however it isn't very responsive when I change the screen size.
I don't want to use bootstrap. and I am aiming hamburger which compresses the buttons into a single column and then expands when I click on a button to show the sub-links. I believe media queries would be possible but I'm not sure how to approach this.
Any help would be appreciated.
HTML / CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
}
h1 {
font-family: 'Alfa Slab One', cursive;
letter-spacing: 5px
}
a {
font-family: 'Permanent Marker', cursive;
color: #FF8240;
}
#nav {
border-bottom: 2px solid red;
background-color: #FF8240
}
.dropdown-toggle {
height: 10vh;
display: flex;
justify-content: space-around;
align-items: center;
width: 95%;
margin: auto;
}
.dropdown-toggle {
position: relative;
}
.dropdown-toggle ul {
position: absolute;
background: White;
margin-top: 10px;
width: 150px;
height: 90px;
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
list-style: none;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
opacity: 0;
pointer-events: none;
transform: translateY(10px);
transition: all 0.4s ease;
}
.dropdown-toggle a {
text-decoration: none;
}
.dropdown-toggle button,
.home {
background: none;
border: none;
color: rgb(196, 19, 19);
font-size: 18px;
font-family: 'Permanent Marker', cursive;
cursor: pointer;
}
.dropdown-toggle button:hover,
.home:hover {
color: #FFF940
}
.DropdownList :hover {
color: rgb(196, 19, 19);
}
.DropdownList button:focus+ul {
opacity: 1;
pointer-events: all;
transform: translateY(0px)
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hungry Burger Company</title>
<link rel="stylesheet" href="CSS/HBCStyleSheet.css">
<link href="https://fonts.googleapis.com/css?family=Alfa+Slab+One|Permanent+Marker|Roboto+Slab:400,700" rel="stylesheet">
</head>
<body>
<!-- Main Container-->
<header id="nav">
<nav>
<div class="dropdown-toggle">
<h1 class="Logo">HBC</h1>
<button>Home</a></button>
<div class="DropdownList" id="About Us">
<button>About Us</button>
<ul>
<li>Who We Are</li>
<li>What we do</li>
</ul>
</div>
<div class="DropdownList" id="menu">
<button>Menu</button>
<ul>
<li>Off The Menu</li>
<li>Build a Burger</li>
</ul>
</div>
<div class="DropdownList" id="Coms">
<button>Contact Us</button>
<ul>
<li>Join Us</li>
<li>Find Us</li>
</ul>
</div>
</div>
</nav>
</header>
<script src="Javascript/HBC.js"></script>
</body>
</html>
Okay, If I understood what you mean exactly. Here is the code that does what you want you can test it with this link:
https://www.w3schools.com/code/tryit.asp?filename=G24ZV5OQJ8EB
Or You can click here directly
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hungry Burger Company</title>
<link rel="stylesheet" href="CSS/HBCStyleSheet.css">
<link href="https://fonts.googleapis.com/css?family=Alfa+Slab+One|Permanent+Marker|Roboto+Slab:400,700" rel="stylesheet">
</head>
<body>
<!-- Main Container-->
<header id="nav">
<nav style="width:100%;">
<div class="dropdown-toggle">
<h1 class="Logo">HBC</h1>
<button id="cc">Home</a></button>
<div class="DropdownList" id="cc">
<button>About Us</button>
<ul>
<li>Who We Are</li>
<li>What we do</li>
</ul>
</div>
<div class="DropdownList" id="cc">
<button>Menu</button>
<ul>
<li>Off The Menu</li>
<li>Build a Burger</li>
</ul>
</div>
<div class="DropdownList" id="cc">
<button>Contact Us</button>
<ul id="cc">
<li>Join Us</li>
<li>Find Us</li>
</ul>
</div>
</div>
<button class="openbtn" onclick="openNav()">☰</button>
</nav>
</header>
<script src="Javascript/HBC.js"></script>
</body>
<style>
#cc{
display:block;
}
.sidebar{
display:none;
}
#mySidebar{
display:none;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
}
h1{
font-family: 'Alfa Slab One', cursive;
letter-spacing: 5px
}
a{
font-family: 'Permanent Marker', cursive;
color:#FF8240;
}
#nav {
border-bottom: 2px solid red;
background-color: #FF8240;
position:absolute;
left:0px;
top:0px;
}
.dropdown-toggle {
height: 10vh;
display: flex;
justify-content: space-around;
align-items: center;
width: 95%;
margin: auto;
}
.dropdown-toggle {
position: relative;
}
.dropdown-toggle ul{
position: absolute;
background: White;
margin-top: 10px;
width: 150px;
height: 90px;
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
list-style: none;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
opacity: 0;
pointer-events: none;
transform: translateY(10px);
transition: all 0.4s ease;
}
.dropdown-toggle a {
text-decoration: none;
}
.dropdown-toggle button,
.home {
background: none;
border: none;
color: rgb(196, 19, 19);
font-size: 18px;
font-family: 'Permanent Marker', cursive;
cursor: pointer;
}
.dropdown-toggle button:hover,
.home:hover {
color: #FFF940
}
.DropdownList :hover {
color: rgb(196, 19, 19);
}
.DropdownList button:focus + ul {
opacity: 1;
pointer-events: all;
transform: translateY(0px)
}
#nav{
width:100%;
}
.openbtn {
display:none;
}
#media only screen and (max-width: 600px) {
body {
font-family: "Lato", sans-serif;
}
.sidebar {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: orange;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
display:block;
}
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidebar a:hover {
color: #f1f1f1;
}
.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.openbtn {
font-size: 20px;
cursor: pointer;
background-color: #111;
color: white;
padding: 10px 15px;
border: none;
display:block;
}
.openbtn:hover {
background-color: #444;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
#mySidebar{
display:block;
}
#nav{
display:block;
}
#cc{
display:none;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
#media screen and (max-height: 450px) {
.sidebar {padding-top: 15px;}
.sidebar a {font-size: 18px;}
}
</style>
</head>
<body>
<div id="mySidebar" class="sidebar">
×
Home <br>
About Us<br>
Who We Are<br>
What we do<br>
<div id="main">
</div>
<script>
function openNav() {
document.getElementById("mySidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("mySidebar").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
}
</script>
I've coded an animation for my navbar, which shows the log in form when hovered, but when I remove the mouse from it, it just disappears, I would like it to smoothly go away the same way it came, what do I have to add to the code?
HTML
<!DOCTYPE html>
<html>
<head>
<title>¡Servicios en un Chasquido! | Chasquido Servicios</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<script defer src="js/fontawesome-all.js"></script>
</head>
<body>
<header>
<div class="container">
<img src="img1.png" style="max-width: 80px; margin-top: 0px;" alt="logo" class="logo">
<nav>
<ul class="menu">
<li class="home">INICIO</li>
<li class="with-arrow">CONTACTO</li>
<li class="with-arrow">REGISTRATE</li>
<li class="with-arrow">INGRESAR
<div class="login-box">
<h2>Datos</h2>
<form>
<p>CORREO</p>
<input type="text" name="" placeholder="Escribir e-mail">
<p>CONTRASEÑA</p>
<input type="password" name="" placeholder="Escribir Contraseña">
<input type="submit" name="" value="Listo">
¿Contraseña olvidada?
</form>
</div>
</li>
</ul>
</nav>
</header>
</div>
<div id="carousel1" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel1" data-slide-to="0" class="1"></li>
<li data-target="#carousel1" data-slide-to="1"></li>
<li data-target="#carousel1" data-slide-to="2"></li>
<li data-target="#carousel1" data-slide-to="3"></li>
<li data-target="#carousel1" data-slide-to="4"></li>
<li data-target="#carousel1" data-slide-to="5"></li>
<li data-target="#carousel1" data-slide-to="6"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="images/portada1.png" width="1900px">
</div>
<div class="item">
<img src="images/portada2.png" width="1900px">
</div>
<div class="item">
<img src="images/portada3.png" width="1900px">
</div>
<div class="item">
<img src="images/portada4.png" width="1900px">
</div>
<div class="item">
<img src="images/portada5.png" width="1900px">
</div>
<div class="item">
<img src="images/portada6.png" width="1900px">
</div>
<div class="item">
<img src="images/portada7.png" width="1900px">
</div>
</div>
<a href="#carousel1" class="left carousel-control" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true">
</span>
</a>
<a href="#carousel1" class="right carousel-control" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true">
</span>
</a>
</div>
</div>
</div>
</body>
</html>
CSS:
.main-wrapper{
margin: 0 auto;
width: 95%;
min-width: 900px;
}
body{
margin: 0;
background: #222;
font-family: sans-serif;
}
.container{
width: 80%;
margin: 0 auto;
}
header{
background: #151515 ;
}
.logo{
float: left;
padding: 10px 0;
}
nav{
float: right;
}
nav ul{
margin: 0;
padding: 0;
list-style: none;
position: relative;
z-index:1000;
}
nav li{
display: inline-block;
margin-left: 50px;
padding: 40px;
position: relative;
}
nav a{
color: lightgrey;
}
nav a:hover {
color: white;
text-decoration: none;
}
body{
margin: 0;
padding: 0;
background: white;
}
.menu {
display: flex;
list-style: none;
background-color: #151515;
margin-left: 50px;
}
.menu li.with-arrow {
padding: 35px 50px;
cursor: pointer;
padding-bottom: 20px;
position: relative;
margin: 5px;
color: lightgray;
font-family: sans-serif;
margin-left: 50px;
}
.menu li.with-arrow:after {
font-family: FontAwesome;
font-size: 20px;
content: '\f107';
display: inline-block;
color: yellow;
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 0);
transition: transform 0.3s ease;
}
.menu li.with-arrow:hover {
background-color: rgba(0, 0, 0, 0.25);
}
.menu li.with-arrow:hover:after {
transform: translate(-50%, 5px);
}
.menu li {
padding: 35px 15px;
padding-bottom: 20px;
position: relative;
margin: 5px;
color: lightgray;
font-family: sans-serif;
cursor: pointer;
}
.menu li:before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: white;
overflow: hidden;
z-index: -1;
transform: scaleX(0);
transform-origin: right;
transition: .15s;
}
.menu li:hover:before{
transform: scaleX(1);
transform-origin: left;
}
.menu li.home:after{
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 100%;
height: 3px;
background: white;
overflow: hidden;
z-index: -1;
transform: scaleX(0);
transform-origin: left;
transition: .15s;
}
.menu li.home:hover:after{
transform: scaleX(1);
transform-origin: right;
}
.menu li:hover {
background-color: rgba(0, 0, 0, .25);
color: white;
}
.login-box{
width: 350px;
height: 420px;
padding: 80px 40px;
box-sizing: border-box;
background: rgba(0, 0, 0, .8);
position: absolute;
right: 0px;
top: 100%;
opacity: 0;
visibility: hidden;
cursor: auto;
}
.menu li:hover .login-box{
animation: load .3s forwards;
display: block;
visibility: visible;
}
#keyframes load{
0%{
transform: translateX(25px) scale(1.6);
}
100%{
opacity: 1;
transform: translateX(0px);
}
}
h2 {
margin: 0;
padding: 0px;
color: #efed40;
text-align: center;
}
.login-box p
{
margin: 0;
padding: 0;
color: white;
}
.login-box input
{
width: 100%;
margin-bottom: 20px;
}
.login-box input[type="text"],
.login-box input[type="password"]
{
border: none;
border-bottom: 1px solid #fff;
background: transparent;
outline: none;
height: 40px;
color: white;
font-size: 16px;
}
::placeholder
{
color: rgba(255, 255, 255, .3);
font-family: sans-serif;
font-weight: bold;
}
.login-box input[type="submit"]
{
border: none;
outline: none;
height: 40px;
color: #fff;
font-size: 16px;
background: #ff267e;
cursor: pointer;
border-radius: 20px;
}
.login-box input[type="submit"]:hover
{
background: #efed40;
color: #262626;
}
.login-box a
{
color: #fff;
font-size: 14px;
text-decoration: none;
}
.login-box a:hover
{
color: yellow;
}
This is my entire code if you would like to see it, if it looks unprofessional or something like that, please know that I'm new to all this and it'll take me some time, I'm still in the dark here, anyway, thanks!
You can't leave the </ul> outside of the tag you put the <ul> in. Your code is:
<nav>
<ul class="menu">
<li class="home">INICIO</li>
<li class="with-arrow">CONTACTO</li>
<li class="with-arrow">REGISTRATE</li>
<li class="with-arrow">INGRESAR
<div class="login-box">
<h2>Datos</h2>
<form>
<p>CORREO</p>
<input type="text" name="" placeholder="Escribir e-mail">
<p>CONTRASEÑA</p>
<input type="password" name="" placeholder="Escribir Contraseña">
<input type="submit" name="" value="Listo">
¿Contraseña olvidada?
</form>
</div>
</li>
</nav>
That's not valid, and it simply doesn't make any sense. It's like doing <nav><ul></nav></ul>
It should be:
<nav>
<ul class="menu">
<li class="home">INICIO</li>
<li class="with-arrow">CONTACTO</li>
<li class="with-arrow">REGISTRATE</li>
<li class="with-arrow">INGRESAR
<div class="login-box">
<h2>Datos</h2>
<form>
<p>CORREO</p>
<input type="text" name="" placeholder="Escribir e-mail">
<p>CONTRASEÑA</p>
<input type="password" name="" placeholder="Escribir Contraseña">
<input type="submit" name="" value="Listo">
¿Contraseña olvidada?
</form>
</div>
</li>
</ul>
</nav>
For this simple animation you dont need the keyframes. This animation can easily create with transition. If you want to have the animation with keyframes you need to work with javascript and so you can handle the classes from li when entering and leaving the element with the mouse. You can then give various animations to the different classes
.menu li .login-box {
transform: translateX(25px) scale(1.6);
opacity: 0;
transition: .3s all linear;
}
.menu li:hover .login-box {
display: block;
visibility: visible;
opacity: 1;
transform: translateX(0px);
}
And here is the result with your Codesample:
.main-wrapper {
margin: 0 auto;
width: 95%;
min-width: 900px;
}
body {
margin: 0;
background: #222;
font-family: sans-serif;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #151515;
}
.logo {
float: left;
padding: 10px 0;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
position: relative;
z-index: 1000;
}
nav li {
display: inline-block;
margin-left: 50px;
padding: 40px;
position: relative;
}
nav a {
color: lightgrey;
}
nav a:hover {
color: white;
text-decoration: none;
}
body {
margin: 0;
padding: 0;
background: white;
}
.menu {
display: flex;
list-style: none;
background-color: #151515;
margin-left: 50px;
}
.menu li.with-arrow {
padding: 35px 50px;
cursor: pointer;
padding-bottom: 20px;
position: relative;
margin: 5px;
color: lightgray;
font-family: sans-serif;
margin-left: 50px;
}
.menu li.with-arrow:after {
font-family: FontAwesome;
font-size: 20px;
content: '\f107';
display: inline-block;
color: yellow;
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 0);
transition: transform 0.3s ease;
}
.menu li.with-arrow:hover {
background-color: rgba(0, 0, 0, 0.25);
}
.menu li.with-arrow:hover:after {
transform: translate(-50%, 5px);
}
.menu li {
padding: 35px 15px;
padding-bottom: 20px;
position: relative;
margin: 5px;
color: lightgray;
font-family: sans-serif;
cursor: pointer;
}
.menu li:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: white;
overflow: hidden;
z-index: -1;
transform: scaleX(0);
transform-origin: right;
transition: .15s;
}
.menu li:hover:before {
transform: scaleX(1);
transform-origin: left;
}
.menu li.home:after {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 100%;
height: 3px;
background: white;
overflow: hidden;
z-index: -1;
transform: scaleX(0);
transform-origin: left;
transition: .15s;
}
.menu li.home:hover:after {
transform: scaleX(1);
transform-origin: right;
}
.menu li:hover {
background-color: rgba(0, 0, 0, .25);
color: white;
}
.login-box {
width: 350px;
height: 420px;
padding: 80px 40px;
box-sizing: border-box;
background: rgba(0, 0, 0, .8);
position: absolute;
right: 0px;
top: 100%;
opacity: 0;
visibility: hidden;
cursor: auto;
}
.menu li .login-box {
transform: translateX(25px) scale(1.6);
opacity: 0;
transition: .3s all linear;
}
.menu li:hover .login-box {
display: block;
visibility: visible;
opacity: 1;
transform: translateX(0px);
}
h2 {
margin: 0;
padding: 0px;
color: #efed40;
text-align: center;
}
.login-box p {
margin: 0;
padding: 0;
color: white;
}
.login-box input {
width: 100%;
margin-bottom: 20px;
}
.login-box input[type="text"],
.login-box input[type="password"] {
border: none;
border-bottom: 1px solid #fff;
background: transparent;
outline: none;
height: 40px;
color: white;
font-size: 16px;
}
::placeholder {
color: rgba(255, 255, 255, .3);
font-family: sans-serif;
font-weight: bold;
}
.login-box input[type="submit"] {
border: none;
outline: none;
height: 40px;
color: #fff;
font-size: 16px;
background: #ff267e;
cursor: pointer;
border-radius: 20px;
}
.login-box input[type="submit"]:hover {
background: #efed40;
color: #262626;
}
.login-box a {
color: #fff;
font-size: 14px;
text-decoration: none;
}
.login-box a:hover {
color: yellow;
}
<!DOCTYPE html>
<html>
<head>
<title>¡Servicios en un Chasquido! | Chasquido Servicios</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<script defer src="js/fontawesome-all.js"></script>
</head>
<body>
<header>
<div class="container">
<img src="img1.png" style="max-width: 80px; margin-top: 0px;" alt="logo" class="logo">
<nav>
<ul class="menu">
<li class="home">INICIO</li>
<li class="with-arrow">CONTACTO</li>
<li class="with-arrow">REGISTRATE</li>
<li class="with-arrow">INGRESAR
<div class="login-box">
<h2>Datos</h2>
<form>
<p>CORREO</p>
<input type="text" name="" placeholder="Escribir e-mail">
<p>CONTRASEÑA</p>
<input type="password" name="" placeholder="Escribir Contraseña">
<input type="submit" name="" value="Listo">
¿Contraseña olvidada?
</form>
</div>
</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
The js Result: jsfidde