How make to an Ul-LI menu flexible? - javascript

When we click the id item on this menu it cover some bottom menu items. Instead of that I want a flexible menu, which means the drop item do not cover any other.
#demo {
margin: 30px 0 50px 0;
font-family: sans-serif;
}
#demo .wrapper {
display: inline-block;
width: 180px;
height: 20px;
position: absolute;
}
#demo .parent {
height: 100%;
width: 100%;
display: block;
cursor: pointer;
height: 150%;
background: #023b3b;
color: white;
z-index: 2;
position: relative;
text-align: center;
}
#demo .parent:hover,
#demo .content:hover ~ .parent {
background: #122112;
}
#demo .content:hover ~ .parent {
z-index: 0;
}
#demo .content {
position: absolute;
top: 0;
display: block;
z-index: 1;
height: 0;
width: 180px;
padding-top: 30px;
}
#demo .wrapper:active .content {
height: 100px;
z-index: 3;
}
#demo .content:hover {
height: 123px;
z-index: 3;
}
#demo .content ul {
background: #339933;
margin: 0;
padding: 0;
overflow: hidden;
height: 100%;
}
#demo .content ul a {
text-decoration: none;
}
#demo .content li:hover {
background: #122112;
color: white;
}
#demo .content li {
list-style: none;
text-align: left;
color: white;
font-size: 14px;
line-height: 30px;
height: 30px;
padding-left: 10px;
}
<div id="demo">
<div class="wrapper">
<div class="parent">Dashboard</div>
</div><br> <br>
<div class="wrapper">
<div class="parent">Apps</div>
<div class="content">
<ul>
<li>Inbox</li>
<li>Condact</li>
<li>Calender</li>
<li>Other</li>
</ul>
</div>
</div><br><br>
<div class="wrapper">
<div class="parent">Layouts</div>
<div class="content">
<ul>
<li>Header</li>
<li>Aside</li>
<li>Footer</li>
<li>Other</li>
</ul>
</div>
</div><br><br>
<div class="wrapper">
<div class="parent">Widjet</div>
</div>
</div>


Check if this could help you. I have added input and label.
#first {
float:left;
width:15%;
color :bisque;
border-color: #023b3b;
border-style : solid;
height: 100%;
background-color :#023b3b;
}
#boa{
height: 5%;
width: 20%;
float: left;
}
.bob{
text-indent: 200%;
line-height: 210%;
font-size: 150%;
font-family: sans-serif;
color: white;
font-weight: bold;
}
.boc{
text-indent: 4%;
color : white;
font-size: 83%;
font-family: sans-serif;
font-weight: normal;
}
.bod{
color:white;
font-size: 100%;
font-family: sans-serif;
line-height: 200%;
list-style-type: none;
}
#demo {
margin: 30px 0 50px 0;
font-family: sans-serif;
}
#demo .wrapper {
display: inline-block;
width: 180px;
}
#demo .parent {
padding: 5px;
display: block;
cursor: pointer;
background: #023b3b;
color: white;
position: relative;
text-align: center;
}
#demo .parent:hover,
#demo .content:hover ~ .parent {
background: #122112;
}
#demo .content:hover ~ .parent {
z-index: 0;
}
#demo .content {
height: 0px;
transition: height 0.3s;
z-index: 1;
width: 180px;
}
#demo .wrapper input[type=radio] {
position: absolute;
opacity: 0
}
#demo .wrapper:hover input[type=radio]:checked + .content {
height: 120px;
}
#demo .content:hover {
height: 123px;
z-index: 3;
}
#demo .content ul {
background: #339933;
margin: 0;
padding: 0;
overflow: hidden;
height: 100%;
}
#demo .content ul a {
text-decoration: none;
}
#demo .content li:hover {
background: #122112;
color: white;
}
#demo .content li {
list-style: none;
text-align: left;
color: white;
font-size: 14px;
line-height: 30px;
height: 30px;
padding-left: 10px;
}
<div id="first" style="float:left; lngth:60%; ">
<p><img src="image1.jpg" id="boa"><span class="bob">First</span></p>
<p class="boc" >Main</p>
<div id="demo">
<div class="wrapper">
<div class="parent">Dashboard</div>
</div><br> <br>
<div class="wrapper">
<label for="apps" class="parent">Apps</label>
<input type="radio" name="menu" id="apps" />
<div class="content">
<ul>
<li>Inbox</li>
<li>Condact</li>
<li>Calender</li>
<li>Other</li>
</ul>
</div>
</div><br><br>
<div class="wrapper">
<label for="layouts" class="parent">Layouts</label>
<input type="radio" name="menu" id="layouts" />
<div class="content">
<ul>
<li>Header</li>
<li>Aside</li>
<li>Footer</li>
<li>Other</li>
</ul>
</div>
</div><br><br>
<div class="wrapper">
<div class="parent">Widjet</div>
</div>
</div>
<p class="boc">Componets</p>
<p class="boc">Help</p>
<p class="bod"> Documents</p>
</div>


You add code in jquery:
$("#demo").hide();
$(".boc").click(function(){
$("#demo").slideToggle();
});

Related

list has 8 items but the the last 4 items moves out from the blue background in testimonials-section

As i am running the html and css code the list of testimonials are 8 but , when i increased the size of the screen to 950px the list of 8 items start coming out of the background, so please can anyone give me the hint that where the code is wrong
const mobileBtn = document.getElementById('mobile-cta');
nav = document.querySelector('nav');
mobileBtnExit = document.getElementById('mobile-sta');
mobileBtn.addEventListener('click' , () => {
nav.classList.add('mobile-menu');
})
mobileBtnExit.addEventListener('click' , () => {
nav.classList.remove('mobile-menu');
})
:root {
--primary-color: #007af3;
}
body{
background: #F2F2F2;
margin: 0 ;
font-family: 'Poppins';
}
.navbar {
background: white;
padding: 1em;
.logo{
text-decoration: none;
font-weight: bold;
color: black ;
font-size: 1.2em;
span {
color: var(--primary-color);
}
}
nav{
display: none;
}
.container{
display: flex;
place-content: space-between;
}
.mobile-menu{
cursor: pointer;
}
}
a{
color: #444444;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
section{
padding: 5em 2em;
}
.hero{
text-align: center;
}
.left-col{
.subhead{
text-transform: uppercase;
font-weight: bold;
color: gray;
letter-spacing: .3em;
}
h1{
font-size: 2.5em;
line-height: 1.3em;
margin-top: .2em;
}
.primary-cta{
background: var(--primary-color);
color: white;
text-decoration: none;
padding: .6em 1.3em;
font-size: 1.4em;
border-radius: 5em;
font-weight: bold;
display: inline-block;
}
.watch-video-cta{
display: block;
margin-top: 1em;
img {
margin-right: .5em;
}
}
}
.hero-img{
width: 70% ;
margin-top: 3em;
}
section.features-section{
background: #20272e;
color: white;
}
ul.feature-list{
margin: 0;
padding-left: .1em;
display: grid;
grid-template-columns: repeat(auto-fit , minmax(19rem, 1fr));
li{
font-size: 1.1em;
margin-bottom: 1em;
margin-left: 2em;
position: relative;
&:before{
content: '';
left: -2em;
position: absolute;
width: 20px;
height: 20px;
background-image: url('../2021frontend/images/bullet.svg');
background-size: contain;
margin-right: .5em;
}
}
}
.features-section img{
display: none;
}
.testimonials-section{
background: var(--primary-color);
color: white;
li{
width: #006bd6;
text-align: center;
padding: 2em 1em;
width: 75%;
margin: 0 auto 5em auto;
border-radius: 1em;
img{
width: 5em;
height: 5em;
border: 5px solid #006bd6;
border-radius: 50%;
margin-top: -4.5em;
}
}
}
h2{
font-size: 2em;
}
label{
display: block;
font-size: 1.2em;
margin-bottom: .5em;
}
input, textarea{
width: 100%;
padding: .8em;
margin-bottom: 1em;
border-radius: .3em;
border: 1px solid gray;
box-sizing: border-box;
}
input[type="submit"]{
background-color: var(--primary-color);
color: white;
font-weight: bold;
font-size: 1.3em;
border: none;
margin-bottom: 5em;
border-radius: 5em;
display: inline-block;
padding: .8em 6.7em;
width: unset;
cursor: pointer;
}
iframe{
width: 100%;
height: 300px;
}
nav.mobile-menu{
display: block;
}
nav{
position: fixed;
z-index: 999;
width: 66%;
right: 0;
top: 0;
background: #20272e;
height: 100vh;
padding: 1em;
ul.primary-nav{
margin-top: 5em;
}
li{
a{
color:white;
text-decoration: none;
display: block;
padding: .5em;
font-size: 1.3em;
text-align: right;
&:hover{
font-weight: bold;
}
}
}
}
.mobile-mobile-closed {
float: right;
margin: .5em;
cursor: pointer;
}
//now here we desinging the pc version of the website
#media only screen and (min-width: 768px){
.mobile-menu, .mobile-menu-closed{
display: none;
}
.navbar .container{
display: grid;
grid-template-columns: 180px auto;
justify-content: unset;
}
.navbar nav{
display: flex;
justify-content: space-between;
background: none;
position: unset;
height: auto;
width: 100%;
padding: 0;
ul{
display: flex;
}
a{
color: black;
font-size: 1em;
padding: .1em 1em;
}
ul.primary-nav{
margin: 0;
}
li.current a{
font-weight: bold;
}
li.go-premium-cta a{
color: var(--primary-color);
border: 3px solid var(--primary-color);
font-weight: bold;
border-radius: 5em;
margin-top: -.2em;
&:hover{
background: var(--primary-color);
color: white;
}
}
}
}
#media only screen and (min-width: 950px) {
.container{
width: 950px;
margin: 0 auto;
}
section{
padding: 10em 4em;
}
.hero .container{
display: flex;
justify-content: space-between;
text-align: left;
.left-col{
margin: 3em 3em 0 5em;
h1 {
font-size: 3em;
width: 90%;
}
}
}
.hero-img{
width: 30%;
margin-right: 8em;
}
.hero-cta{
display: flex;
}
.primary-cta{
margin-right: 1em;
}
ul.features-list{
display: block;
margin-left: 5em;
li{
font-size: 1.4em;
&:before{
width: 30px;
height: 30px;
}
}
}
.features-section{
position: relative;
}
.features-section img{
display:block;
position: absolute;
right: 0;
width: 325px;
bottom: -6em;
height: 250px;
}
.testimonials-section ul{
display: flex;
li {
margin: 0 1em;
flex-basis: 33.333333%;
}
}
.contact-section{
position: relative;
display: flex;
}
.contact-right{
position: absolute;
right: 0;
top: 0;
width: 45%;
height: 100%;
iframe{
height: 100%;
}
}
}
//here we done the styling of 1220px and after
#media only screen and (min-width: 1220px){
.features-section{
&:before{
content: '';
position: absolute;
width: 10%;
height: 20em;
background: var(--primary-color);
left: 0;
top: -4em;
}
&:after{
content: '';
position: absolute;
width: 200px;
height: 18em;
background: url('../2021frontend/images/dots.svg') no-repeat;
top: -1em;
left: auto;
}
}
}
<div class="navbar"> <!-- here class is the name given to the div block so that the css identify it for styling it-->
<div class="container">
<a class="logo" href="#">Let's<span>Code</span></a>
<img id="mobile-cta" class="mobile-menu" src="2021frontend/images/menu.svg" alt="Open navigation">
<nav>
<img id="mobile-sta" class="mobile-menu-closed" src="2021frontend/images/exit.svg" alt="Closed navigation">
<ul class="primary-nav">
<li class="home">Home</li>
<li>Events</li>
<li>Registration</li>
</ul>
<ul class="secondary-nav">
<li>GrowYourMoney</li>
<li>Projects</li>
</ul>
</nav>
</div>
</div>
<section class="hero">
<div class="container">
<div class="left-col">
<p class="subhead">Share with the World & Grow with the World</p>
<h1>We are here to make the Future</h1>
<div class="hero-cta">
Click Here
<a href="#" class="watch-video-cta">
<img src="2021frontend/images/watch.svg" alt="Watch a video">Watch a Video
</a>
</div>
</div>
<img src="2021frontend/images/illustration.svg" class="hero-img" alt="illustration-images">
</div>
</section>
<section class="features-section">
<div class="container">
<ul class="feature-list">
<li>Full Stack Web Development</li>
<li>Full Stack Mobile App Development</li>
<li>Cloud tech</li>
<li>Devops</li>
<li>Web3 Development</li>
<li>Stock Market</li>
</ul>
<img src="2021frontend/images/holding-phone.jpg" alt="Man holding phone">
</div>
</section>
<section class="testimonials-section">
<div class="container">
<ul>
<li>
<img src="2021frontend/images/person.jpg" alt="person">
<blockquote>"has a strong hold in full stack web Development, leader of team antidote in sih prefinal round"</blockquote>
<cite>- saksham bansal</cite>
</li>
<li>
<img src="2021frontend/images/person.jpg" alt="person">
<blockquote>"starting my journey as a full stack developer and interested in web3 domain"</blockquote>
<cite>- sayan halder</cite>
</li>
<li>
<img src="2021frontend/images/person.jpg" alt="person">
<blockquote>"currently doing frontend development with bootstrap and loves playing football and cricket"</blockquote>
<cite>- varun sharma</cite>
</li>
<li>
<img src="2021frontend/images/person.jpg" alt="person">
<blockquote>"currently learning web Development and see myself in future as a android developer "</blockquote>
<cite>- parth barara</cite>
</li>
<li>
<img src="2021frontend/images/person.jpg" alt="person">
<blockquote>"iam the tomper of the class and likes chemistry very much"</blockquote>
<cite>- sakshi gupta</cite>
</li>
<li>
<img src="2021frontend/images/person.jpg" alt="person">
<blockquote>"i dont know what i am doing but my boyfriend loves me very much"</blockquote>
<cite>- nandini gulati</cite>
</li>
<li>
<img src="2021frontend/images/person.jpg" alt="person">
<blockquote>"same as nandini"</blockquote>
<cite>- kushi suri</cite>
</li>
<li>
<img src="2021frontend/images/person.jpg" alt="person">
<blockquote>"iam the don of kv, dont even try to fight with me in palam"</blockquote>
<cite>- sribash paul</cite>
</li>
</ul>
</div>
</section>
<br>
<section class="contact-section">
<div class="contact-left">
<h2>Contact</h2>
<form action="">
<label for="name">Name</label>
<input type="text" id="name" name="name" placeholder="Your Name"> <br>
<br>
<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="#email.com"> <br>
<br>
<label for="message">Message</label> <br>
<textarea name="message" id="message" cols="30" rows="10"></textarea> <br>
<br>
<input type="submit" class="send-message-cta" value="Send Message">
</form>
</div>
<div>
<div class="contact-right">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d28026.467037845872!2d77.08443149999997!3d28.59052415000001!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390d1b3f9902dce7%3A0xdf51d27e693abbea!2sPalam%2C%20New%20Delhi%2C%20Delhi!5e0!3m2!1sen!2sin!4v1649777392215!5m2!1sen!2sin" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>
<img src="2021frontend/images/" alt="">
</section>

By default display: flex; will try and put everything onto one row. Where you have .testimonials-section ul { in your 950px breakpoint add flex-wrap: wrap;
One thing to note, and I may be mistaken here, is that flex-basis doesn't take margins into consideration, so you will find that your testimonials will be 2 per row instead of 3 because of the horizontal margins you've set. You can fix this by change flex-basis: 33.3333% to flex-basis: calc(33.3333% - 2em);

How to position text at the center of images?

I'm trying to make slideshow images i'm learning step by step for now i want to know how to position text at center of the images then making images overlay in one position.Please take a look at my code (i'm sorry for my english) thank you.
body {
margin: 0;
}
li, a{
text-decoration: none;
list-style-type: none;
text-decoration-line: none;
color: black;
}
/*main-menu*/
#main-menu {
position: relative;
}
#main-menu ul {
margin: 0;
padding: 0;
}
#main-menu li {
display: inline-block;
}
#main-menu a {
display: block;
width: 100px;
padding: 10px;
border: 1px solid;
text-align: center;
}
/*sub-topics*/
#sub-topics {
position: absolute;
display: none;
margin-top: 10px;
width: 100%;
left: 0;
}
#sub-topics ul {
margin: 0;
padding: 0;
}
#sub-topics li {
display: block;
}
#subTopics a {
text-align: left;
}
/*columns*/
#column1, #column2, #column3 {
position: relative;
float: left;
left: 125px;
margin: 0px 5px 0px 0px;
}
/*hover underline*/
#main-menu li:hover {
text-decoration: underline;
}
/*slideshow*/
#slideshow {
position: relative;
width: 100%;
height: 100%;
overflow-x: hidden;
}
#slider{
overflow-x: hidden;
}
#slide1 {
background-image: url(https://preview.ibb.co/mV3TR7/1.jpg);
}
#slide2 {
background-image: url(https://preview.ibb.co/bSCBeS/2.jpg);
}
#slide3 {
background-image: url(https://preview.ibb.co/kgG9Yn/3.jpg);
}
.slide {
background-repeat: no-repeat;
background-position: center;
background-size: 800px 400px;
width: 100%;
height: 450px;
overflow-x: hidden;
}
.slide-contain {
text-align: center;
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<header></header>
<nav>
<div id="main-menu">
<ul>
<li>Logo</li>
<li>Home</li>
<li>
Topics
<div id="sub-topics">
<div id="column1" class="columns">
<ul>
<li>example1</li>
<li>example2</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</nav>
<div id="slideshow">
<div id="arrow-left" class="arrow"></div>
<div id="slide1" class="slide">
<div class="slide-contain">
<span>Image One</span>
</div>
</div>
<div id="slide2" class="slide">
<div class="slide-contain">
<span>Image Two</span>
</div>
</div>
<div id="slide3" class="slide">
<div class="slide-contain">
<span>Image Three</span>
</div>
</div>
<div id="arrow-right" class="arrow"></div>
</div>
<script src="jquery.js"></script>
<script src="index.js"></script>
<script>
</script>
</body>
</html>
I'm trying to make slideshow images i'm learning step by step for now i want to know how to position text at center of the images then making images overlay in one position.Please take a look at my code (i'm sorry for my english) thank you.

I had added some code to these two classes.
Now your caption will be in the centre
Happy Coding
.slide {
position:relative;
}
.slide-contain {
position:absolute;
bottom:50%;
left:50%;
transform: translate3d(-50%,-50%,0);
background:#efefef;
}
body {
margin: 0;
}
li, a{
text-decoration: none;
list-style-type: none;
text-decoration-line: none;
color: black;
}
/*main-menu*/
#main-menu {
position: relative;
}
#main-menu ul {
margin: 0;
padding: 0;
}
#main-menu li {
display: inline-block;
}
#main-menu a {
display: block;
width: 100px;
padding: 10px;
border: 1px solid;
text-align: center;
}
/*sub-topics*/
#sub-topics {
position: absolute;
display: none;
margin-top: 10px;
width: 100%;
left: 0;
}
#sub-topics ul {
margin: 0;
padding: 0;
}
#sub-topics li {
display: block;
}
#subTopics a {
text-align: left;
}
/*columns*/
#column1, #column2, #column3 {
position: relative;
float: left;
left: 125px;
margin: 0px 5px 0px 0px;
}
/*hover underline*/
#main-menu li:hover {
text-decoration: underline;
}
/*slideshow*/
#slideshow {
position: relative;
width: 100%;
height: 100%;
overflow-x: hidden;
}
#slider{
overflow-x: hidden;
}
#slide1 {
background-image: url(https://preview.ibb.co/mV3TR7/1.jpg);
}
#slide2 {
background-image: url(https://preview.ibb.co/bSCBeS/2.jpg);
}
#slide3 {
background-image: url(https://preview.ibb.co/kgG9Yn/3.jpg);
}
.slide {
background-repeat: no-repeat;
background-position: center;
background-size: 800px 400px;
width: 100%;
height: 450px;
overflow-x: hidden;
position:relative;
}
.slide-contain {
text-align: center;
position:absolute;
bottom:50%;
left:50%;
transform: translate3d(-50%,-50%,0);
background:#efefef;
}
<header></header>
<nav>
<div id="main-menu">
<ul>
<li>Logo</li>
<li>Home</li>
<li>
Topics
<div id="sub-topics">
<div id="column1" class="columns">
<ul>
<li>example1</li>
<li>example2</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</nav>
<div id="slideshow">
<div id="arrow-left" class="arrow"></div>
<div id="slide1" class="slide">
<div class="slide-contain">
<span>Image One</span>
</div>
</div>
<div id="slide2" class="slide">
<div class="slide-contain">
<span>Image Two</span>
</div>
</div>
<div id="slide3" class="slide">
<div class="slide-contain">
<span>Image Three</span>
</div>
</div>
<div id="arrow-right" class="arrow"></div>
</div>

Your text is already over the background image. You just need to add background-position. Try this code.
body {
margin: 0;
}
li,
a {
text-decoration: none;
list-style-type: none;
text-decoration-line: none;
color: black;
}
/*main-menu*/
#main-menu {
position: relative;
}
#main-menu ul {
margin: 0;
padding: 0;
}
#main-menu li {
display: inline-block;
}
#main-menu a {
display: block;
width: 100px;
padding: 10px;
border: 1px solid;
text-align: center;
}
/*sub-topics*/
#sub-topics {
position: absolute;
display: none;
margin-top: 10px;
width: 100%;
left: 0;
}
#sub-topics ul {
margin: 0;
padding: 0;
}
#sub-topics li {
display: block;
}
#subTopics a {
text-align: left;
}
/*columns*/
#column1,
#column2,
#column3 {
position: relative;
float: left;
left: 125px;
margin: 0px 5px 0px 0px;
}
/*hover underline*/
#main-menu li:hover {
text-decoration: underline;
}
/*slideshow*/
#slideshow {
position: relative;
width: 100%;
height: 100%;
overflow-x: hidden;
}
#slider {
overflow-x: hidden;
}
#slide1 {
background-image: url(https://preview.ibb.co/mV3TR7/1.jpg);
background-position: left top;
}
#slide2 {
background-image: url(https://preview.ibb.co/bSCBeS/2.jpg);
background-position: left top;
}
#slide3 {
background-image: url(https://preview.ibb.co/kgG9Yn/3.jpg);
background-position: left top;
}
.slide {
background-repeat: no-repeat;
background-position: center;
background-size: 800px 400px;
width: 100%;
height: 450px;
overflow-x: hidden;
position: relative;
}
.slide-contain {
text-align: center;
color: white;
position: relative;
height: 100%;
width: 100%;
}
.slide-contain span {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

HTML/CSS Jquery hover not showing up

I am new to Jquery and
I am trying to make a dropdown on my navigation using simple Jquery hover effect, and I think I am using wrong selector on Jquery.
I would like to see the dropdown and be able to navigate when i hover over 'What's New'
Any help would be awesome. Thanks,
See ATTACHED IMG
$(document).ready(function () {
$("li .nav-level-1").hover(
function () {
$('.nav-level-2').slideDown('200');
},
function () {
$('.nav-level-2').slideUp('200');
}
);
});
.main-nav {
background: #000;
height: 30px;
position: relative;
overflow: visible;
z-index: 2;
width: 100%;
left: 0;
cursor: default;
}
.main-nav .inner{
height: 100%;
}
.main-nav>.inner{
text-align: justify;
}
.nav-links-container {
position: static;
/* background: red; */
height: 100%;
}
.nav-links{
padding: 0 0 0 3px;
display: inline;
margin-bottom: 20px;
overflow: hidden;
/*background-color: green; */
}
li {
vertical-align: top;
padding: 5px;
display: inline-block;
/* background: blue; */
}
li>a {
color: #FFF;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 10px 9px 9px;
margin: 0 -3px;
}
li>a:hover {
background-color: white;
color:#000;
}
.nav-level-2 {
visibility: hidden;
position: absolute;
top: 30px;
left: 0;
width: 100%;
height: auto;
border-bottom: 5px solid #000;
background: red;
text-align: left;
}
.nav-level-2-container {
padding-top: 40px;
padding-bottom: 40px;
-ms-flex: 0px 1px auto;
-webkit-box-flex: 0;
-webkit-flex: 0px 1px auto;
flex: 0px 1px auto;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<nav class="main-nav">
<div class="inner max-girdle-width">
<div class="nav-links-container">
<ul class="nav-links">
<li class="nav-whats-new"> <a class="nav-level-1" href="#">What's New</a>
<div class="nav-level-2">
<div class="nav-level-2-container row max-girdle-width">
<div>Submenu </div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>

You should use a nested ul for your dropdown menu. You don't need jQuery at all for this. It can all be done with CSS. Take a look at this simple hover effect under the Products tab.
Codepen
HTML
<header class="navbar">
<div class="container">
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>
Products
<ul>
<li>Cars
<ul>
<li>Ford</li>
<li>Chevy</li>
<li>Toyota</li>
</ul>
</li>
<li>Trucks</li>
<li>Vans</li>
<li>SUVs</li>
</ul>
</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
</header>
CSS
header {
width: 100%;
height: 50px;
margin: 0;
padding: 0;
background-color: #2EBAE8;
}
.container {
width: 100%;
max-width: 1040px;
margin: 0 auto;
}
ul {
float: left;
list-style-type: none;
margin: 0;
padding: 0;
}
ul ul {
width: 200px;
background-color: #046382;
display: none;
position: absolute;
top: 100%;
left: 0;
float: none;
}
ul ul ul {
top: 0;
left: 100%;
}
ul ul li {
float: none;
}
ul li {
float: left;
padding: 0 10px;
position: relative;
}
ul li:hover > ul {
display: block;
}
ul a {
display: block;
text-decoration: none;
color: white;
line-height: 50px;
transition: color 0.5s;
}
ul a:hover {
color: #E82E82;
}

Your submenu is hidden with visibility: hidden style.
I also separated the handled so that the menu doesn't hide while you're hovering it, and added finish() so that we're not queueing animations.
But yeah, like ncox85 said you should do this with css.
$(document).ready(function () {
$('.nav-level-2').hide();
$("li .nav-level-1").mouseenter(
function () {
$('.nav-level-2').finish().slideDown('200');
}
);
$("li .nav-level-2").mouseleave(
function () {
$('.nav-level-2').finish().slideUp('200');
});
});
.main-nav {
background: #000;
height: 30px;
position: relative;
overflow: visible;
z-index: 2;
width: 100%;
left: 0;
cursor: default;
}
.main-nav .inner{
height: 100%;
}
.main-nav>.inner{
text-align: justify;
}
.nav-links-container {
position: static;
/* background: red; */
height: 100%;
}
.nav-links{
padding: 0 0 0 3px;
display: inline;
margin-bottom: 20px;
overflow: hidden;
/*background-color: green; */
}
li {
vertical-align: top;
padding: 5px;
display: inline-block;
/* background: blue; */
}
li>a {
color: #FFF;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 10px 9px 9px;
margin: 0 -3px;
}
li>a:hover {
background-color: white;
color:#000;
}
.nav-level-2 {
position: absolute;
top: 30px;
left: 0;
width: 100%;
height: auto;
border-bottom: 5px solid #000;
background: red;
text-align: left;
}
.nav-level-2-container {
padding-top: 40px;
padding-bottom: 40px;
-ms-flex: 0px 1px auto;
-webkit-box-flex: 0;
-webkit-flex: 0px 1px auto;
flex: 0px 1px auto;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<nav class="main-nav">
<div class="inner max-girdle-width">
<div class="nav-links-container">
<ul class="nav-links">
<li class="nav-whats-new"> <a class="nav-level-1" href="#">What's New</a>
<div class="nav-level-2">
<div class="nav-level-2-container row max-girdle-width">
<div>Submenu </div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>

Just use display:none instead of visibility:hidden on class .nav-level-2

If any of you are wondering, I got a good result from just using html/css, got rid of jquery.
Maybe I will use jquery another time. fun lesson for myself and those of you out there. Thanks guys
.main-nav {
background: #000;
height: 30px;
position: relative;
overflow: visible;
z-index: 2;
width: 100%;
left: 0;
cursor: default;
}
.main-nav .inner{
height: 100%;
}
.main-nav>.inner{
text-align: justify;
}
.nav-links-container {
position: static;
/* background: red; */
height: 100%;
}
.nav-links{
padding: 0 0 0 3px;
display: inline;
margin-bottom: 20px;
overflow: hidden;
/*background-color: green; */
}
li {
vertical-align: top;
padding: 5px;
display: inline-block;
/* background: blue; */
}
li>a {
color: #FFF;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 10px 9px 9px;
margin: 0 -3px;
}
li>a:hover {
background-color: white;
color:#000;
}
.nav-level-2 {
display: none;
position: absolute;
top: 30px;
left: 0;
width: 100%;
height: auto;
border-bottom: 5px solid #000;
background: red;
text-align: left;
}
.nav-level-2-container {
padding-top: 40px;
padding-bottom: 40px;
-ms-flex: 0px 1px auto;
-webkit-box-flex: 0;
-webkit-flex: 0px 1px auto;
flex: 0px 1px auto;
}
li>a:hover + .nav-level-2{
display: block;
}
.nav-level-2:hover {
display: block;
}
<nav class="main-nav">
<div class="inner max-girdle-width">
<div class="nav-links-container">
<ul class="nav-links">
<li class="nav-whats-new"> <a class="nav-level-1" href="#">What's New</a>
<div class="nav-level-2">
<div class="nav-level-2-container row max-girdle-width">
<div>Submenu </div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>

hover is firing while clicking and leaving element

I have a strange problem.I dont find any solution.
I have a click and hover event on an element.When i click on the elements and leaves both click and hover are working but i dont want hover to work when i click and leave.
$('div#menu > div.menu').hover(function() {
$(this).addClass('menuHighlight');
$(this).find('.spanHighlight').addClass('shown');
}, function() {
$(this).removeClass('menuHighlight');
$(this).find('.spanHighlight').removeClass('shown');
console.log('unhover');
});
$('.menu').click(function() {
var _id = $(this).attr('id');
$('.menu').removeClass('menuHighlight');
$(this).addClass('menuHighlight');
$('.spanHighlight').removeClass('shown');
$(this).find('.spanHighlight').addClass('shown');
$('#content > div').removeClass('shown');
$('#' + _id + 'Main').addClass('shown');
});
.spanHighlight {
position: relative;
bottom: 10px;
display: block;
height: 10px;
background: rgb(16, 168, 171);
display: none;
}
.shown {
display: block!important;
}
.menuHighlight {
background: rgb(80, 91, 123);
}
div#menu .icon > div {
width: 30px;
height: 30px;
display: inline-block;
position: relative;
top: 10px;
}
div#menu > div.menu {
width: 180px;
height: 100%;
color: white;
display: inline-block;
line-height: 48px;
text-align: center;
text-align: center;
font-weight: bold;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div id="menu" style="
height: 50px;
width: 100%;
BACKGROUND: rgb(57,65,101);
border-radius: 5px;
">
<div id="dashBoard" class="menu">DashBoard<span class="spanHighlight"></span>
</div>
<div id="addApp" class="menu menuHighlight">Add Application<span class="spanHighlight shown"></span>
</div>
<div id="linkApp" class="menu">Link Applications<span class="spanHighlight"></span>
</div>
</div>
I want both the functions to work,But when am clicking on .menu and leaving the element unhover should not call.
Please guide me how to do that

I think you can solve it by using a clicked state, In the below solution an additional class clicked is used to indicate that that item was clicked, if so don't do anything in mouseleave
$('div#menu > div.menu').hover(function() {
$(this).addClass('menuHighlight');
$(this).find('.spanHighlight').addClass('shown');
}, function() {
if ($(this).hasClass('clicked')) {
return;
}
$(this).removeClass('menuHighlight');
$(this).find('.spanHighlight').removeClass('shown');
console.log('unhover');
});
$('.menu').click(function() {
$('.menu.menuHighlight').removeClass('menuHighlight');
$('.menu.clicked').removeClass('clicked');
$(this).addClass('menuHighlight').addClass('clicked');
$('.spanHighlight.shown').removeClass('shown');
$(this).find('.spanHighlight').addClass('shown');
$('#content > div').removeClass('shown');
$('#' + this.id + 'Main').addClass('shown');
});
.spanHighlight {
position: relative;
bottom: 10px;
display: block;
height: 10px;
background: rgb(16, 168, 171);
display: none;
}
.shown {
display: block!important;
}
.menuHighlight {
background: rgb(80, 91, 123);
}
div#menu .icon > div {
width: 30px;
height: 30px;
display: inline-block;
position: relative;
top: 10px;
}
div#menu > div.menu {
width: 180px;
height: 100%;
color: white;
display: inline-block;
line-height: 48px;
text-align: center;
text-align: center;
font-weight: bold;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div id="menu" style="
height: 50px;
width: 100%;
BACKGROUND: rgb(57,65,101);
border-radius: 5px;
">
<div id="dashBoard" class="menu">DashBoard<span class="spanHighlight"></span>
</div>
<div id="addApp" class="menu menuHighlight">Add Application<span class="spanHighlight shown"></span>
</div>
<div id="linkApp" class="menu">Link Applications<span class="spanHighlight"></span>
</div>
</div>
A much simpler implementation using css for hover will be
$('.menu').click(function() {
$('.menu.selected').removeClass('selected');
$(this).addClass('selected');
$('#content > div').removeClass('shown');
$('#' + this.id + 'Main').addClass('shown');
});
.spanHighlight {
position: relative;
bottom: 10px;
display: block;
height: 10px;
background: rgb(16, 168, 171);
display: none;
}
div#menu .icon > div {
width: 30px;
height: 30px;
display: inline-block;
position: relative;
top: 10px;
}
div#menu > div.menu {
width: 180px;
height: 100%;
color: white;
display: inline-block;
line-height: 48px;
text-align: center;
text-align: center;
font-weight: bold;
cursor: pointer;
}
div#menu > div.menu:hover, div#menu > div.menu.selected {
background: rgb(80, 91, 123);
}
div#menu > div.menu:hover .spanHighlight, div#menu > div.menu.selected .spanHighlight {
display: block!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div id="menu" style="
height: 50px;
width: 100%;
BACKGROUND: rgb(57,65,101);
border-radius: 5px;
">
<div id="dashBoard" class="menu">DashBoard<span class="spanHighlight"></span>
</div>
<div id="addApp" class="menu selected">Add Application<span class="spanHighlight"></span>
</div>
<div id="linkApp" class="menu">Link Applications<span class="spanHighlight"></span>
</div>
</div>

How do i get elements to disable when i click on another element?

I have 5 social media buttons in a row, 2 of which have menus which are triggered by jquery slidetoggle. The problem is, that when the twitter button is clicked it rearranges the icons as the menu appears and knocks them all out of place. How do i prevent this?
Here is my code:
$(".button").click(function() {
$(this).closest('.comment').find(".box").toggle();
});
#icons {
width: 450px;
padding: 0px!important;
}
.comment {
width: 140px;
float: right;
}
.button {
width: 25px;
display: inline;
margin-right: 5px;
vertical-align: top!important;
height: 25px;
}
.box {
margin-top: -20px;
width: 25px;
}
.box ul {
width: 80px;
height: 35px;
padding: 10px;
background-color: #fff;
}
ul.tw {
border: 0px;
}
li.normal {
margin-right: 25px!important;
width: 80px;
}
li.tw {
margin-right: 60px;
width: 80px;
}
#hidden {
display: none;
}
li {
padding: 0!important;
list-style-type: none;
float: right;
}
a {
padding: 0 !important;
font-family: Arial;
font-size: 12px !important;
text-decoration: underline !important;
color: #000000 !important;
padding-left: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<body>
<div id="icons">
<div class="comment">
<div class="button">
<img src="http://devjohnson.com/skin/frontend/dJTheme/default/images/facebook_icon.png">
</div>
<div class="box" id="hidden">
<ul class="normal">
<li class="normal">DocJohnson
</li>
<li class="normal">Ask The Doc
</li>
</ul>
</div>
</div>
<div class="comment">
<div class="button">
<img src="http://devjohnson.com/skin/frontend/dJTheme/default/images/twitter_icon.png">
</div>
<div class="box" id="hidden">
<ul class="tw">
<li class="tw">DocJohnson
</li>
<li class="tw">Ask The Doc
</li>
</ul>
</div>
<div class="button">
<a href="http://docjohnsonusa.tumblr.com/" target="_blank">
<img src="http://devjohnson.com/skin/frontend/dJTheme/default/images/tumblr_icon.png" id="socialImage" />
</a>
</div>
<div class="button">
<a href="https://www.youtube.com/user/DOCJOHNSON1976" target="_blank">
<img src="http://devjohnson.com/skin/frontend/dJTheme/default/images/youtube_icon.png" />
</a>
</div>
<div class="button">
<a href="http://instagram.com/docjohnsonusa" target="_blank">
<img src="http://devjohnson.com/skin/frontend/dJTheme/default/images/instagram_icon.png" />
</a>
</div>
</div>
</body>
Fiddle

Not sure if it can break your layout, but it worked adding position:absolute to the #hidden element:
#hidden {
display:none;
position: absolute;
margin-top: -10px;
}
Fiddle. Also added margin-top: -10px because the .box value of -20px was making the div get over the button.

There are a number of CSS things to fix. But the main thing is a combination of position relative and absolute to make the dropdowns position properly.
http://codepen.io/anon/pen/WvLwdx
#icons {
text-align: center;
}
.comment {
display: inline-block;
}
.button {
position: relative;
display: inline-block;
margin-right: 5px;
vertical-align: top;
}
.box {
position: absolute;
top: 30px;
right: 0;
}
.box ul {
margin: 0;
background-color: #fff;
}
ul li {
display: block;
}
.hidden {
display: none;
}
a {
padding: 0 !important;
font-family: Arial;
font-size: 12px !important;
text-decoration: underline !important;
color: #000 !important;
padding-left: 10px;
}

I have copied all of your code to a jsFiddle, all you need to do is add position: absolute to your .box class like so
jsFiddle : https://jsfiddle.net/g1Lfg7y5/
CSS
#icons {
width: 450px;
padding: 0px!important;
}
.comment {
width: 140px;
float: right;
}
.button {
width: 25px;
display: inline;
margin-right: 5px;
vertical-align: top!important;
height: 25px;
}
.box {
margin-top: -20px;
width: 25px;
position: absolute;
}
.box ul {
width: 80px;
height: 35px;
padding: 10px;
background-color: #fff;
}
ul.tw {
border: 0px;
}
li.normal {
margin-right: 25px!important;
width: 80px;
}
li.tw {
margin-right: 60px;
width: 80px;
}
#hidden {
display: none;
}
li {
padding: 0!important;
list-style-type: none;
float: right;
}
a {
padding: 0 !important;
font-family: Arial;
font-size: 12px !important;
text-decoration: underline !important;
color: #000000 !important;
padding-left: 10px;
}

I see lots of inconsistencies here.
First of all turn hidden into a class. It repeats itself more than once so it can't be an id.
Then try:
.hidden
{
display: none;
position: absolute;
z-index: 1000;
}
I tested it and it worked.

Categories

Resources