My navbar functions in a :selected way, which means the dropdown menu only shows when the button is selected. I would like to change it to hover instead, but when I adjust it in CSS, it doesn't change anything. I'm afraid of adjusting anything else as it may mess other things up too.
I also tried to change the height of the buttons so that the bottom-border fits perfectly at the bottom of the button when hovering over the button. Yet when I mess around with the height, hover and padding it shows no effect.
I'm not sure what I did wrong with my navbar I think I broke it, and I'm not sure where the mistakes were made.
I would really appreciate some help with fixing my navbar and perhaps a bit of advice on how the solution came to be.
Thank you!
<!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">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#600&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/194918e54c.js" crossorigin="anonymous"></script>
<title>Localhost</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="faq.css">
</head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<section class="navigation">
<div class="nav-container">
<div class="brand">
<img src="photos/ae-header-logo.png" alt="" srcset="">
</div>
<nav>
<div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
<ul class="nav-list">
<li>
Home
</li>
<li>
About
</li>
<li>
Services
<ul class="nav-dropdown">
<li>
Web Design
</li>
<li>
Web Development
</li>
<li>
Graphic Design
</li>
</ul>
</li>
<li>
Pricing
</li>
<li>
Portfolio
<ul class="nav-dropdown">
<li>
Web Design
</li>
<li>
Web Development
</li>
<li>
Graphic Design
</li>
</ul>
</li>
<li>
Contact
</li>
</ul>
</nav>
</div>
</section>
html,body {
margin: 0;
padding: 0;
height: auto;
font-family: 'Poppins';
box-sizing: border-box;
background-color: rgb(255, 255, 255) !important;
}
.navigation {
height: 120px;
background-color: green;
}
.brand {
position: absolute;
top: 1%;
left: 0%;
float: left;
text-transform: uppercase;
font-size: 1.9em;
}
.brand img{
position: relative;
margin-top: 0%;
width: 500px;
padding-left: 0%;
left: 0%;
float: left;
}
.brand img:hover{
box-shadow: 10px;
transition: all ease-in-out 0.5s;
}
.brand a, .brand a:visited {
color: #fff;
text-decoration: none;
}
.nav-container {
max-width: 1000px;
margin: 0 auto;
background-color: red;
}
nav {
float: right;
position: relative;
left: 20%;
margin-top: 20px;
background-color: rgb(255, 0, 212);
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
float: left;
position: relative;
}
nav ul li a, nav ul li a:visited {
display: block;
padding: 0 20px;
line-height: 100px;
color: black;
text-decoration: none;
}
nav ul li a:hover, nav ul li a:visited:hover {
border-bottom: black 2px solid;
}
nav ul li a:not(:only-child):after, nav ul li a:visited:not(:only-child):after {
padding-left: 4px;
content: ' ▾';
}
nav ul li ul li {
min-width: 190px;
}
nav ul li ul li a {
padding: 15px;
line-height: 20px;
}
.nav-dropdown {
position: absolute;
display: none;
z-index: 1;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}
/* Mobile navigation */
.nav-mobile {
display: none;
position: absolute;
top: 0;
right: 0;
background: #262626;
height: 70px;
width: 70px;
}
#media only screen and (max-width: 798px) {
.nav-mobile {
display: block;
}
nav {
width: 100%;
padding: 70px 0 15px;
}
nav ul {
display: none;
}
nav ul li {
float: none;
}
nav ul li a {
padding: 15px;
line-height: 20px;
}
nav ul li ul li a {
padding-left: 30px;
}
.nav-dropdown {
position: static;
}
}
#media screen and (min-width: 799px) {
.nav-list {
display: block !important;
}
}
#nav-toggle {
position: absolute;
left: 18px;
top: 22px;
cursor: pointer;
padding: 10px 35px 16px 0px;
}
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
cursor: pointer;
border-radius: 1px;
height: 5px;
width: 35px;
background: #fff;
position: absolute;
display: block;
content: '';
transition: all 300ms ease-in-out;
}
#nav-toggle span:before {
top: -10px;
}
#nav-toggle span:after {
bottom: -10px;
}
#nav-toggle.active span {
background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
top: 0;
}
#nav-toggle.active span:before {
transform: rotate(45deg);
}
#nav-toggle.active span:after {
transform: rotate(-45deg);
}
.nav-list li:hover ul{
display: block
}
Hope it's what you're looking for
Related
I want to place the navigation bar on top, in transparent, as the shown in the picture. I tried to pix the position and the width and height but still didn’t work.
* {
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}
.header {
min-height: 100vh;
width: 100%;
background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(img/arnold-francisca-nPhl2x4fk2s-unsplash.jpg);
background-position: center;
background-size: cover;
position: relative;
}
nav {
display: flex;
padding: 25px 50px 75px 100px;
justify-content: space-between;
align-items: center;
position: relative;
}
nav img {
width: 85px;
}
.nav-links {
flex: 1;
text-align: right;
}
.nav-links ul li {
list-style: none;
display: inline-block;
padding: 8px 12px;
position: relative;
}
.nav-links ul li a {
color: rgb(8, 8, 8);
text-decoration: none;
font-size: 15px;
}
.nav-links ul li::after {
content: '';
width: 0%;
height: 3px;
background: #d6574e;
display: block;
margin: auto;
transition: 0.5s;
}
.nav-links ul li:hover::after {
width: 100%;
}
.text-box {
width: 90%;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
.text-box h1 {
font-size: 40px;
}
.text-box p {
margin: 10px 0 40px;
font-size: 16px;
color: #fff;
}
.hero-btn {
display: inline-block;
text-decoration: none;
color: #cfaba9;
border: 1px solid #cfaba9;
padding: 10px 30px;
font-size: 13px;
background: transparent;
position: relative;
cursor: pointer;
}
.hero-btn:hover {
border-radius: 50px;
background: #cfaba9;
transition: 1s;
}
nav .fa {
display: none;
}
#media(max-width: 700px){
.text-box h1 {
font-size: 20px;
}
.nav-links ul li {
display: block;
}
.nav-links ul li {
position: absolute;
background: #cfaba9;
height: 100vh;
width: 200px;
top: 0;
right: 0;
text-align: left;
z-index: 2;
}
nav .fa {
display: block;
color: #cfaba9;
margin: 10px;
font-size: 22px;
cursor: pointer;
}
.nav-links ul {
padding: 30px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="with=device-width, initial-scale=1.0">
<title>Nikko Permelona | UX/UI Designer, Frontend Developer & Learner</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght#100;200;300;400;600;700&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#6.1.2/css/fontawesome.min.css">
</head>
<body>
<section class="header"></section>
<nav>
<img src="img/GYSD7530-modified.png">
<div class="nav-links">
<i class="fa fa-times"></i>
<ul>
<li>About</li>
<li>Experience</li>
<li>Work</li>
<li>Contact</li>
<li>Resume</li>
</ul>
</div>
<i class="fa fa-bars"></i>
</nav>
<div class="text-box">
<h1>UI/UX Designer, Frontend Developer & Learner</h1>
<p>I design and code gorgeously simple things, and I love what I do</p>
Explore
</div>
</body>
</html>
Just wrap the nav and the text-box divs with the header section. It looks like you closed the header section right away and haven't wrapped it with anything, modify the part like this:
<section class="header">
<nav>
<img src="img/GYSD7530-modified.png">
<div class="nav-links">
<i class="fa fa-times"></i>
<ul>
<li>About</li>
<li>Experience</li>
<li>Work</li>
<li>Contact</li>
<li>Resume</li>
</ul>
</div>
<i class="fa fa-bars"></i>
</nav>
<div class="text-box">
<h1>UI/UX Designer, Frontend Developer & Learner</h1>
<p>I design and code gorgeously simple things, and I love what I do</p>
Explore
</div>
</section>
This should work fine
You can make it transparent by use the css property:
background-color: transparent;
Also to make the nav bar go to top try putting it in div instead of nav.
I am new to coding and am struggling to get the template for my nav menu ready. First of all, I want the hamburger to hide whenever I click on it and then the menu opens. However, I'm still at the beginning, and can't even get the hamburger to hide. I want to toggle the class ".hamburger-hide" using jQuery, which includes the display:none property.
this is the html:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/styles.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#100&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#800&display=swap" rel="stylesheet">
<title>Navbar</title>
</head>
<body>
<header class="header">
<h1 class="logo">Logo</h1>
<nav class="navbar">
<ul class="nav-list">
<li class="nav-item">Home</li>
<li class="nav-item">About</li>
<li class="nav-item">Contact Us</li>
<li class="nav-item">Links</li>
</ul>
</nav>
<div class="btn">
<a class="cta" href="#"><button>Hello World</button></a>
</div>
<img class="hamburger" src="speisekarte.svg" alt="hamburger-menu">
</header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="index.js" charset="utf-8"></script>
</body>
</html>
this is my CSS:
*{ /*Setting all to 0*/
padding:0;
margin:0;
box-sizing: border-box; /*If you set box-sizing: border-box; on an element, padding and border are included in the width and height*/
}
header {
display: flex; /* Das ist der Flex container (header) in ihm müssen items positioniert werden*/
justify-content: space-between; /*justify-content + align-itmes = center ==> perfect center*/
align-items: center;
background-color: #707070;
padding: 30px 10%;
}
.logo {
font-family: "Montserrat", sans-serif;
font-weight: 800;
cursor: pointer;
}
button {
cursor: pointer;
padding: 9px 25px;
background-color: rgba(0, 136, 169, 1); /* letzter ist alpha --> opacity, 1 = 100%*/
border: none;
border-radius: 50px;
transition: all 0.3s ease 0s;
}
button:hover {
background-color: rgba(0, 136, 169, 0.7); /* alpha ändert sich beim hovern --> opacity nimmt ab, 0,7 = 70%*/
text-decoration: none;
}
.btn a {
text-decoration: none;
}
.nav-item {
list-style: none;
}
.nav-item {
display: inline-block; /* ul ist in reihe nicht untereinander. kann auch direkt an li gemacht werden*/
padding: 0px 30px;
}
.navbar li a {
transition: all 0.3s ease 0s; /*letzter wert= delay, ease-in-out= vorwärts und rückwärts*/
}
.navbar li a:hover {
color: #0088a9;
}
.nav-item a, button{
text-decoration: none;
color: #edf0f1;
font-family: "Montserrat", sans-serif;
font-size: 16px;
font-weight: normal;
}
.hamburger {
height:40px;
cursor: pointer;
position:relative;
}
.hamburger:hover {
padding:2px;
border: 2px solid;
border-radius: 5px;
}
.hamburger-hide {
display:none;
}
#media (max-width: 768px){
.nav-list{
display: none;
}
.cta {
display: none;
}
}
#media (min-width:769px){
.hamburger{
display:none;
}
}
and this is the jQuery I tried, so that it hides on click.
$(".hamburger").click(function(){
$(".hamburger").toggleClass(".hamburger-hide");
})
Solution with jQuery for build up Hamburger navbar responsive
For my example:
(function($) { // Begin jQuery
$(function() { // DOM ready
// If a link has a dropdown, add sub menu toggle.
$('nav ul li a:not(:only-child)').click(function(e) {
$(this).siblings('.nav-dropdown').toggle();
// Close one dropdown when selecting another
$('.nav-dropdown').not($(this).siblings()).hide();
e.stopPropagation();
});
// Clicking away from dropdown will remove the dropdown class
$('html').click(function() {
$('.nav-dropdown').hide();
});
// Toggle open and close nav styles on click
$('#nav-toggle').click(function() {
$('nav ul').slideToggle();
});
// Hamburger to X toggle
$('#nav-toggle').on('click', function() {
this.classList.toggle('active');
});
}); // end DOM ready
})(jQuery);
#charset "UTF-8";
body{
margin:0;
}
.navigation {
height: 70px;
background: #6d7993;
font-family: montserrat, sans-serif;
font-weight: 400;
font-style: normal;
opacity: 0.88;
}
.brand {
position: absolute;
padding-left: 20px;
float: left;
line-height: 70px;
text-transform: uppercase;
font-size: 1.4em;
}
.brand a,
.brand a:visited {
color: #ffffff;
text-decoration: none;
}
.nav-container {
max-width: 1000px;
margin: 0 auto;
}
nav {
float: right;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
float: left;
position: relative;
}
nav ul li a,
nav ul li a:visited {
display: block;
padding: 0 20px;
line-height: 70px;
background: #6d7993;
color: #ffffff;
text-decoration: none;
}
nav ul li a:hover,
nav ul li a:visited:hover {
background: #4b5569;
color: #ffffff;
}
nav ul li a:not(:only-child):after,
nav ul li a:visited:not(:only-child):after {
padding-left: 4px;
content: " ▾";
}
nav ul li ul li {
min-width: 190px;
}
nav ul li ul li a {
padding: 15px;
line-height: 20px;
}
.nav-dropdown {
position: absolute;
display: none;
z-index: 1;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}
/* Mobile navigation */
.nav-mobile {
display: none;
position: absolute;
top: 0;
right: 0;
background: #6d7993;
height: 70px;
width: 70px;
}
#media only screen and (max-width: 798px) {
.nav-mobile {
display: block;
}
nav {
width: 100%;
padding: 70px 0 15px;
}
nav ul {
display: none;
}
nav ul li {
float: none;
}
nav ul li a {
padding: 15px;
line-height: 20px;
}
nav ul li ul li a {
padding-left: 30px;
}
.nav-dropdown {
position: static;
}
}
#media screen and (min-width: 799px) {
.nav-list {
display: block !important;
}
}
#nav-toggle {
position: absolute;
left: 18px;
top: 22px;
cursor: pointer;
padding: 10px 35px 16px 0px;
}
#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
cursor: pointer;
border-radius: 1px;
height: 5px;
width: 35px;
background: #ffffff;
position: absolute;
display: block;
content: "";
transition: all 300ms ease-in-out;
}
#nav-toggle span:before {
top: -10px;
}
#nav-toggle span:after {
bottom: -10px;
}
#nav-toggle.active span {
background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
top: 0;
}
#nav-toggle.active span:before {
transform: rotate(45deg);
}
#nav-toggle.active span:after {
transform: rotate(-45deg);
}
article {
max-width: 1000px;
margin: 0 auto;
padding: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<section class="navigation">
<div class="nav-container">
<div class="brand">
Logo
</div>
<nav>
<div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
<ul class="nav-list">
<li>
Home
</li>
<li>
Contact Us
</li>
<li>
Link
</li>
</ul>
</ul>
</nav>
</div>
</section>
Updated
Solution 2, Using Pure CSS
body {
margin: 0;
font-family: Helvetica, sans-serif;
background-color: #f4f4f4;
}
a {
color: #000;
}
/* header */
.header {
background-color: #fff;
box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
position: fixed;
width: 100%;
z-index: 3;
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fff;
}
.header li a {
display: block;
padding: 20px 20px;
border-right: 1px solid #f4f4f4;
text-decoration: none;
}
.header li a:hover,
.header .menu-btn:hover {
background-color: #f4f4f4;
}
.header .logo {
display: block;
float: left;
font-size: 2em;
padding: 10px 20px;
text-decoration: none;
}
/* menu */
.header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
/* menu icon */
.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.header .menu-icon .navicon {
background: #333;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #333;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.header .menu-icon .navicon:before {
top: 5px;
}
.header .menu-icon .navicon:after {
top: -5px;
}
/* menu btn */
.header .menu-btn {
display: none;
}
.header .menu-btn:checked ~ .menu {
max-height: 240px;
}
.header .menu-btn:checked ~ .menu-icon .navicon {
background: transparent;
}
.header .menu-btn:checked ~ .menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header .menu-btn:checked ~ .menu-icon .navicon:after {
transform: rotate(45deg);
}
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
top: 0;
}
/* 48em = 768px */
#media (min-width: 48em) {
.header li {
float: left;
}
.header li a {
padding: 20px 30px;
}
.header .menu {
clear: none;
float: right;
max-height: none;
}
.header .menu-icon {
display: none;
}
}
<header class="header">
Your Logo
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li>Contact Me</li>
</ul>
</header>
Here you go:
https://jsfiddle.net/ap2rzb5x/1/
$("#hamburger").click(function(){
$("#hamburger").toggleClass("hamburger-hide");
$("#hamburger").toggleClass("hamburger");
})
Summary you toggled just that one class, didn't want you maybe switch them (toggle the original hamburger class away?). Just in case I matched on the ID instead of the class so I could toggle away the original hamburger and still be able to match it with the same code.
Another problem is that you toggled '.hamburger-hide' that's not the class name, it's called 'hamburger-hide' the dot is only used by jQuery as the dollar search. Same with #hamburger, it will find ID of hamburger not #hamburger-hide.
https://api.jquery.com/category/selectors/
Probably it's not exactly doing what you want, but I think it should unstuck you and you should be able to continue making what you intend to do.
This question already has answers here:
What is the opposite of :hover (on mouse leave)?
(13 answers)
Closed 2 years ago.
First. Sorry to lack English grammar skills.
I trying clone coding one of korea corporation website.
but, is not working. transition property of Pseudo-element.
The css line number in question is "51". in header .gnb ul li a span:hover:after
/* Skip css reset and import img file */
/* index.css */
header{
width: 100%;
height: 80px;
text-align: center;
}
header h1{
position: absolute;
left: 50px;
top: 0;
}
header h1 a {
display: block;
width: 110px;
height: 50px;
position: absolute;
top: 15px;
background: url("../img/sp_com.png") no-repeat -300px 0;
color: transparent;
}
header .gnb ul li{
display: inline-block;
}
header .gnb ul li a{
display: block;
height: 80px;
padding: 0 35px;
font-size: 17px;
line-height: 80px;
}
header .gnb ul li a span{
position: relative;
}
header .gnb ul li a span:hover:after{
content: "";
display: block;
position: absolute;
left: 0;
bottom: -10px;
width: 100%;
height: 1px;
background-color: #336584;
**transition: all 1s ease;**
}
header .spot{
position: absolute;
right: 50px;
top: 0;
}
header .spot ul li{
float: left;
line-height: 80px;
}
header .spot ul li a{
display: block;
position: relative;
height: 80px;
padding: 0 10px;
line-height: 80px;
}
header .spot ul li:last-child a{
padding-right: 0;
}
header .spot ul li:before{
content:"";
display: block;
position: absolute;
top: 50%;
width: 1px;
height: 7px;
background-color: #ccc;
transform: translateY(-50%)
}
header .spot ul li:first-child:before{
content: "";
display: none;
}
header .gnb ul li a:hover{
font-weight: blod !important;
color:#336584;
}
header .spot ul li a:hover{
font-weight: bold !important;
color:#336584;
text-decoration: underline;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/default.css">
<link rel="stylesheet" href="../css/index.css">
<title>Document</title>
</head>
<body>
<header>
<h1>한솔홈데코</h1>
<h2 class="hide">대메뉴</h2>
<nav class="gnb">
<ul>
<li><span>제품정보</span></li>
<li><span>시공사례</span></li>
<li><span>고객센터</span></li>
<li><span>기업소개</span></li>
<li><span>사업분야</span></li>
</ul>
</nav>
<h2 class="hide">관련서비스</h2>
<nav class="spot">
<ul>
<li>제품찾기</li>
<li>SITEMAP</li>
<li>BLOG</li>
<li>YOUTUBE</li>
</ul>
</nav>
</header>
</body>
</html>
Add transition property in spna:after to get transition effect in hover
Try using this code:
header .gnb ul li a span:after{
content: "";
transition: all 0.4s ease;
}
/* Skip css reset and import img file */
/* index.css */
header{
width: 100%;
height: 80px;
text-align: center;
}
header h1{
position: absolute;
left: 50px;
top: 0;
}
header h1 a {
display: block;
width: 110px;
height: 50px;
position: absolute;
top: 15px;
background: url("../img/sp_com.png") no-repeat -300px 0;
color: transparent;
}
header .gnb ul li{
display: inline-block;
}
header .gnb ul li a{
display: block;
height: 80px;
padding: 0 35px;
font-size: 17px;
line-height: 80px;
}
header .gnb ul li a span{
position: relative;
}
header .gnb ul li a span:after {
content: "";
transition: all 0.4s ease;
}
header .gnb ul li a span:hover:after{
display: block;
position: absolute;
left: 0;
bottom: -10px;
width: 100%;
height: 1px;
background-color: #336584;
}
header .spot{
position: absolute;
right: 50px;
top: 0;
}
header .spot ul li{
float: left;
line-height: 80px;
}
header .spot ul li a{
display: block;
position: relative;
height: 80px;
padding: 0 10px;
line-height: 80px;
}
header .spot ul li:last-child a{
padding-right: 0;
}
header .spot ul li:before{
content:"";
display: block;
position: absolute;
top: 50%;
width: 1px;
height: 7px;
background-color: #ccc;
transform: translateY(-50%)
}
header .spot ul li:first-child:before{
content: "";
display: none;
}
header .gnb ul li a:hover{
font-weight: blod !important;
color:#336584;
}
header .spot ul li a:hover{
font-weight: bold !important;
color:#336584;
text-decoration: underline;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/default.css">
<link rel="stylesheet" href="../css/index.css">
<title>Document</title>
</head>
<body>
<header>
<h1>한솔홈데코</h1>
<h2 class="hide">대메뉴</h2>
<nav class="gnb">
<ul>
<li><span>제품정보</span></li>
<li><span>시공사례</span></li>
<li><span>고객센터</span></li>
<li><span>기업소개</span></li>
<li><span>사업분야</span></li>
</ul>
</nav>
<h2 class="hide">관련서비스</h2>
<nav class="spot">
<ul>
<li>제품찾기</li>
<li>SITEMAP</li>
<li>BLOG</li>
<li>YOUTUBE</li>
</ul>
</nav>
</header>
</body>
</html>
transfer your transition property from header .gnb ul li a span:hover:after to header .gnb ul li a
header .gnb ul li a{
display: block;
height: 80px;
padding: 0 35px;
font-size: 17px;
line-height: 80px;
transition: all 1s ease;
}
I have a question about the dropdown menu size. If the title in the dropdown is long, it moves to the bottom line. I want it to increase the width of the Dropdown menu size. How can I do that. Below you can find the photo of the dropdown menu and the corresponding codes.Thanks for your answers.
Dropdown Menu
HTML
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Responsive Drop-down Menu Bar</title>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<nav>
<div class="logo">
CodingNepal</div>
<label for="btn" class="icon">
<span class="fa fa-bars"></span>
</label>
<input type="checkbox" id="btn">
<ul>
<li>Home</li>
<li>
<label for="btn-1" class="show">Features +</label>
Features
<input type="checkbox" id="btn-1">
<ul>
<li>Pages</li>
<li>Elements</li>
<li>Icons</li>
</ul>
</li>
<li>
<label for="btn-2" class="show">Services +</label>
Services
<input type="checkbox" id="btn-2">
<ul>
<li>Web Design and some information</li>
<li>App Design</li>
<li>
<label for="btn-3" class="show">More +</label>
More <span class="fa fa-plus"></span>
<input type="checkbox" id="btn-3">
<ul>
<li>Submenu-1</li>
<li>Submenu-2</li>
<li>Submenu-3</li>
</ul>
</li>
</ul>
</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
<div class="content">
<header>Responsive Drop-down Menu Bar</header>
<p>
HTML and CSS (Media Query)</p>
</div>
<script>
$('.icon').click(function(){
$('span').toggleClass("cancel");
});
</script>
</body>
</html>
CSS
#import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
user-select: none;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
background: #f2f2f2;
}
nav{
background: #1b1b1b;
}
nav:after{
content: '';
clear: both;
display: table;
}
nav .logo{
float: left;
color: white;
font-size: 27px;
font-weight: 600;
line-height: 70px;
padding-left: 60px;
}
nav ul{
float: right;
margin-right: 40px;
list-style: none;
position: relative;
}
nav ul li{
float: left;
display: inline-block;
background: #1b1b1b;
margin: 0 5px;
}
nav ul li a{
color: white;
line-height: 70px;
text-decoration: none;
font-size: 18px;
padding: 8px 15px;
}
nav ul li a:hover{
color: cyan;
border-radius: 5px;
box-shadow: 0 0 5px #33ffff,
0 0 10px #66ffff;
}
nav ul ul li a:hover{
box-shadow: none;
}
nav ul ul{
position: absolute;
top: 90px;
border-top: 3px solid cyan;
opacity: 0;
visibility: hidden;
transition: top .3s;
}
nav ul ul ul{
border-top: none;
}
nav ul li:hover > ul{
top: 70px;
opacity: 1;
visibility: visible;
}
nav ul ul li{
position: relative;
margin: 0px;
width: 150px;
float: none;
display: list-item;
border-bottom: 1px solid rgba(0,0,0,0.3);
}
nav ul ul li a{
line-height: 50px;
}
nav ul ul ul li{
position: relative;
top: -60px;
left: 150px;
}
.show,.icon,input{
display: none;
}
.fa-plus{
font-size: 15px;
margin-left: 40px;
}
#media all and (max-width: 968px) {
nav ul{
margin-right: 0px;
float: left;
}
nav .logo{
padding-left: 30px;
width: 100%;
}
.show + a, ul{
display: none;
}
nav ul li,nav ul ul li{
display: block;
width: 100%;
}
nav ul li a:hover{
box-shadow: none;
}
.show{
display: block;
color: white;
font-size: 18px;
padding: 0 20px;
line-height: 70px;
cursor: pointer;
}
.show:hover{
color: cyan;
}
.icon{
display: block;
color: white;
position: absolute;
top: 0;
right: 40px;
line-height: 70px;
cursor: pointer;
font-size: 25px;
}
nav ul ul{
top: 70px;
border-top: 0px;
float: none;
position: static;
display: none;
opacity: 1;
visibility: visible;
}
nav ul ul a{
padding-left: 40px;
}
nav ul ul ul a{
padding-left: 80px;
}
nav ul ul ul li{
position: static;
}
[id^=btn]:checked + ul{
display: block;
}
nav ul ul li{
border-bottom: 0px;
}
span.cancel:before{
content: '\f00d';
}
}
.content{
z-index: -1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
header{
font-size: 35px;
font-weight: 600;
padding: 10px 0;
}
p{
font-size: 30px;
font-weight: 500;
}
Put those two styles on your code. the reason for your issue is not specify the width of inner list.
nav ul li ul {
width: fit-content;
}
nav ul li ul li {
width: 100%;
display: block;
}
in your stylesheet there is some bad practices without defining any class names for your styles. it is hard to find when add more styles. you can use ids or classes and tones of ways to make it easy.
I need modifying the jQuery code so when hovering over full width dropdown it opens instead of clicking on it, but when width is less than 798px, the dropdown must stay the way it is now, opened when clicked.
I have been trying to change .click to .hover, but without success. On this state it opens the dropdown menu when hovered, but on mouse out it closes immediately.It would be good for someone to share a solution on this problem, because this is not my code(downloaded free) and I am not well in JavaScript programming.
Thank you,
CP
(function($) { // Begin jQuery
$(function() { // DOM ready
// If a link has a dropdown, add sub menu toggle.
$('nav ul li a:not(:only-child)').click(function(e) {
$(this).siblings('.nav-dropdown').toggle();
// Close one dropdown when selecting another
$('.nav-dropdown').not($(this).siblings()).hide();
e.stopPropagation();
});
// Clicking away from dropdown will remove the dropdown class
$('html').click(function() {
$('.nav-dropdown').hide();
});
// Toggle open and close nav styles on click
$('#nav-toggle').click(function() {
$('nav ul').slideToggle();
});
// Hamburger to X toggle
$('#nav-toggle').on('click', function() {
this.classList.toggle('active');
});
}); // end DOM ready
})(jQuery); // end jQuery
#charset "UTF-8";
.navigation {
height: 70px;
background: #262626;
}
.brand {
position: absolute;
padding-left: 20px;
float: left;
line-height: 70px;
text-transform: uppercase;
font-size: 1.4em;
}
.brand a,
.brand a:visited {
color: #ffffff;
text-decoration: none;
}
.nav-container {
max-width: 1000px;
margin: 0 auto;
}
nav {
float: right;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
float: left;
position: relative;
}
nav ul li a,
nav ul li a:visited {
display: block;
padding: 0 20px;
line-height: 70px;
background: #262626;
color: #ffffff;
text-decoration: none;
}
nav ul li a:hover,
nav ul li a:visited:hover {
background: #2581DC;
color: #ffffff;
}
nav ul li a:not(:only-child):after,
nav ul li a:visited:not(:only-child):after {
padding-left: 4px;
content: ' ▾';
}
nav ul li ul li {
min-width: 190px;
}
nav ul li ul li a {
padding: 15px;
line-height: 20px;
}
.nav-dropdown {
position: absolute;
display: none;
z-index: 1;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}
/* Mobile navigation */
.nav-mobile {
display: none;
position: absolute;
top: 8px;
right: 10px;
background: #262626;
width: 70px;
}
#media only screen and (max-width: 798px) {
.nav-mobile {
display: block;
}
nav {
width: 100%;
padding: 70px 0 15px;
}
nav ul {
display: none;
}
nav ul li {
float: none;
}
nav ul li a {
padding: 15px;
line-height: 20px;
}
nav ul li ul li a {
padding-left: 30px;
}
.nav-dropdown {
position: static;
}
}
#media screen and (min-width: 799px) {
.nav-list {
display: block !important;
}
}
#nav-toggle {
position: absolute;
left: 18px;
top: 22px;
cursor: pointer;
padding: 10px 35px 16px 0px;
}
#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
cursor: pointer;
border-radius: 1px;
height: 5px;
width: 35px;
background: #ffffff;
position: absolute;
display: block;
content: '';
transition: all 300ms ease-in-out;
}
#nav-toggle span:before {
top: -10px;
}
#nav-toggle span:after {
bottom: -10px;
}
#nav-toggle.active span {
background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
top: 0;
}
#nav-toggle.active span:before {
transform: rotate(45deg);
}
#nav-toggle.active span:after {
transform: rotate(-45deg);
}
article {
max-width: 1000px;
margin: 0 auto;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="navigation">
<div class="nav-container">
<div class="brand">
Logo
</div>
<nav>
<div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
<ul class="nav-list">
<li>
Home
</li>
<li>
About
</li>
<li>
Services
<ul class="nav-dropdown">
<li>
Web Design
</li>
<li>
Web Development
</li>
<li>
Graphic Design
</li>
</ul>
</li>
<li>
Pricing
</li>
<li>
Portfolio
<ul class="nav-dropdown">
<li>
Web Design
</li>
<li>
Web Development
</li>
<li>
Graphic Design
</li>
</ul>
</li>
<li>
Contact
</li>
</ul>
</nav>
</div>
</section>
Hope it helps, you just neede to locate the listener and make an if to manage the screen width.
Could be prettier, if needed will be happy to provide it.
(function($) { // Begin jQuery
$(function() { // DOM ready
if ($(window).width() < 798) {
// If a link has a dropdown, add sub menu toggle.
$('nav ul li a:not(:only-child)').click(function(e) {
$(this).siblings('.nav-dropdown').toggle();
// Close one dropdown when selecting another
$('.nav-dropdown').not($(this).siblings()).hide();
e.stopPropagation();
});
} else {
$('nav ul li a').hover(function(e) {
$(this).siblings('.nav-dropdown').toggle();
// Close one dropdown when selecting another
$('.nav-dropdown').not($(this).siblings()).hide();
e.stopPropagation();
});
}
// Clicking away from dropdown will remove the dropdown class
$('html').click(function() {
$('.nav-dropdown').hide();
});
// Toggle open and close nav styles on click
$('#nav-toggle').click(function() {
$('nav ul').slideToggle();
});
// Hamburger to X toggle
$('#nav-toggle').on('click', function() {
this.classList.toggle('active');
});
}); // end DOM ready
})(jQuery); // end jQuery
$(window).resize(function() {
location.reload();
});
#charset "UTF-8";
.navigation {
height: 70px;
background: #262626;
}
.brand {
position: absolute;
padding-left: 20px;
float: left;
line-height: 70px;
text-transform: uppercase;
font-size: 1.4em;
}
.brand a,
.brand a:visited {
color: #ffffff;
text-decoration: none;
}
.nav-container {
max-width: 1000px;
margin: 0 auto;
}
nav {
float: right;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
float: left;
position: relative;
}
nav ul li a,
nav ul li a:visited {
display: block;
padding: 0 20px;
line-height: 70px;
background: #262626;
color: #ffffff;
text-decoration: none;
}
nav ul li a:hover,
nav ul li a:visited:hover {
background: #2581DC;
color: #ffffff;
}
nav ul li a:not(:only-child):after,
nav ul li a:visited:not(:only-child):after {
padding-left: 4px;
content: ' ▾';
}
nav ul li ul li {
min-width: 190px;
}
nav ul li ul li a {
padding: 15px;
line-height: 20px;
}
.nav-dropdown {
position: absolute;
display: none;
z-index: 1;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}
/* Mobile navigation */
.nav-mobile {
display: none;
position: absolute;
top: 8px;
right: 10px;
background: #262626;
width: 70px;
}
#media only screen and (max-width: 798px) {
.nav-mobile {
display: block;
}
nav {
width: 100%;
padding: 70px 0 15px;
}
nav ul {
display: none;
}
nav ul li {
float: none;
}
nav ul li a {
padding: 15px;
line-height: 20px;
}
nav ul li ul li a {
padding-left: 30px;
}
.nav-dropdown {
position: static;
}
}
#media screen and (min-width: 799px) {
.nav-list {
display: block !important;
}
}
#nav-toggle {
position: absolute;
left: 18px;
top: 22px;
cursor: pointer;
padding: 10px 35px 16px 0px;
}
#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
cursor: pointer;
border-radius: 1px;
height: 5px;
width: 35px;
background: #ffffff;
position: absolute;
display: block;
content: '';
transition: all 300ms ease-in-out;
}
#nav-toggle span:before {
top: -10px;
}
#nav-toggle span:after {
bottom: -10px;
}
#nav-toggle.active span {
background-color: transparent;
}
#nav-toggle.active span:before,
#nav-toggle.active span:after {
top: 0;
}
#nav-toggle.active span:before {
transform: rotate(45deg);
}
#nav-toggle.active span:after {
transform: rotate(-45deg);
}
article {
max-width: 1000px;
margin: 0 auto;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="navigation">
<div class="nav-container">
<div class="brand">
Logo
</div>
<nav>
<div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
<ul class="nav-list">
<li>
Home
</li>
<li>
About
</li>
<li>
Services
<ul class="nav-dropdown">
<li>
Web Design
</li>
<li>
Web Development
</li>
<li>
Graphic Design
</li>
</ul>
</li>
<li>
Pricing
</li>
<li>
Portfolio
<ul class="nav-dropdown">
<li>
Web Design
</li>
<li>
Web Development
</li>
<li>
Graphic Design
</li>
</ul>
</li>
<li>
Contact
</li>
</ul>
</nav>
</div>
</section>