We Keep Coding

Absolute element on the top of relative element hover and on-click problem

I am having a problem with an absolute element. This element is the floating-count which is on the top of the navigation.
Problem is when I hover my mouse on floating-count element, the drop-down arrow also is hovering (it should suppose to hover or change color when the navigation hovers). Then when I am clicking the floating-count element the drop-down navigation also showing (it should suppose to show when the navigation was clicked).
I tried changing (playing with it as I expect to see the solution) and adding z-index to the elements but I am confused with it.
Code here:
$('.mnav').on('click', function() {
if ($(this).children('.dpdown').is(":hidden")) {
console.log('show');
$(this).children('.dpdown').slideDown("fast");
} else {
$(this).children('.dpdown').slideUp("fast");
console.log('hide');
}
});
li.mnav,
.navigation ul.right li.mnav {
display: inline-block;
position: relative;
}
a.text-link,
.navigation ul.right li.mnav a.text-link {
color: #fff;
font-size: 15px;
line-height: 15px;
padding: 14px 24px;
display: block;
text-decoration: none;
text-transform: uppercase;
}
.nav-arrow {
background: yellow;
}
.nav-arrow:after {
top: 40%;
right: 0;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-top-color: #1b6b00;
border-width: 8px;
}
.floating-count {
position: absolute;
z-index: 1;
border-radius: 20px;
background: red;
padding: 4px 8px;
top: -12px;
right: -2px;
text-decoration: none;
color: #FFF;
}
.dpdown {
position: absolute;
left: 0;
top: 50px;
width: 300px;
display: none;
z-index: 1;
}
.dpdown ul li a {
font-size: 12px;
color: #eaf2ac;
padding: 5px 30px;
display: block;
text-decoration: none;
text-transform: uppercase;
}
.dpdown ul {
list-style-type: none;
background-color: #1b6b00;
text-align: left;
margin: 0;
padding: 4px 0;
}
ul.right {
list-style-type: none;
background-color: #208100;
text-align: center;
margin: 0;
padding: 0;
float: left;
border-radius: 5px;
}
ul.right li.mnav:hover,
.navigation ul.right li.mnav a.text-link:hover {
color: #ffea00;
}
.dpdown:hover>.nav-arrow:after {
color: #ffea00;
}
.navigation .mnav:hover>.nav-arrow:after {
border-top-color: #ffea00;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navigation">
<ul class="right">
<li class="mnav">
Drop Down<span class="nav-arrow"></span>
<span class="floating-count-wrap"><a class="floating-count" href="/#count">2</a></span>
<div class="dpdown">
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
</div>
</li>
</ul>
</div>
Try it in jsfiddle:

You have the hover style based on .mnav and the js dropdown triggered by .mnav but .floating-count-wrap is a child of .mnav so it is triggering those events.
I adjusted the css and js to use .mnav .test-link as the selector. I also had to make the css rule use sibling and not parent selection. Similarily, in the js, the selector for the dropdown is no longer a child of $(this) so I updated that to $(this).parent()
updated js fiddle
js
$('.mnav .text-link').on('click', function() { ... });
css
.navigation .mnav .text-link:hover + .nav-arrow:after { ... }

How can I animate border-radius of li element with jquery?

I just started doing some jquery and php and I followed the tutorial from Udemy on how to build some php web site. Now I want to animate the li elements so that their border-radius changes on mouseenter().
Here is my code:
$(document).ready(function() {
$('.list_el').mouseenter(function() {
$(this).animate(borderRadius(300), 200);
});
function borderRadius(radius) {
return {
borderTopLeftRadius: radius,
borderTopRightRadius: radius,
borderBottomLeftRadius: radius,
borderBottomRightRadius: radius,
};
}
});
#nav {
margin: -27px 0 0;
margin-top: 50px;
}
#nav ul {
display: inline-block;
text-align: left;
list-style: none;
}
#nav ul li {
display: inline-block;
width: 90px;
height: 44px;
margin: 0 10px;
text-align: center;
}
#nav ul li a {
display: block;
padding: 10px 15px;
color: white;
border: solid 2px white;
background: #353535;
outline: solid 2px #353535;
text-decoration: none;
}
#nav ul li a:hover {
background: #8ca757;
outline: solid 2px #8ca757;
}
<div id="nav">
<ul id="my_navbar">
<li class="list_el">Home
</li>
<li class="list_el">Team
</li>
<li class="list_el">Menu
</li>
<li class="list_el">Contact
</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
But when I enter the mouse on any of the li element (menu,contact..) it doesn't animate, I mean when I press F12 and target the li it shows me that the border-radius is changing but on the website it doesn't curve the border. So what am I doing wrong?
Just in case :

The animation works, it just has no visual effect: your a elements contains all the style, you'll see some change if you animate the a's border-radius or if you put overflow: hidden for list_el
$('.list_el').mouseenter(function() {
$(this).find("a").animate(borderRadius(300), 200);
});
this will work for instance
http://codepen.io/anon/pen/PGPrgY

You should use mouse enter and leave event together
$('.list_el').on("mouseenter", function() {
$(this).find("a").animate(borderRadius(300), 200);
}).on("mouseleave", function() {
$(this).find("a").animate(borderRadius(0), 200);
});

On any modern browser, you can also achieve this transition with simply:
.list_el:hover a {
border-radius: 300px;
transition: 0.2s;
}
That animates the border-radius of the contained a element over a period of 200ms when the .list_el containing the a is hovered.
Note that this assumes you were planning to add a mouseleave handler that undoes the border-radius. It doesn't apply if you were planning to leave the updated radius in place when the mouse leaves the element.
Example using 1s rather than 0.2s so it's more obvious:
#nav {
margin: -27px 0 0;
margin-top: 50px;
}
#nav ul {
display: inline-block;
text-align: left;
list-style: none;
}
#nav ul li {
display: inline-block;
width: 90px;
height: 44px;
margin: 0 10px;
text-align: center;
}
#nav ul li a {
display: block;
padding: 10px 15px;
color: white;
border: solid 2px white;
background: #353535;
outline: solid 2px #353535;
text-decoration: none;
}
#nav ul li a:hover {
background: #8ca757;
outline: solid 2px #8ca757;
}
.list_el:hover a {
border-radius: 300px;
transition: 1s;
}
<div id="nav">
<ul id="my_navbar">
<li class="list_el">Home
</li>
<li class="list_el">Team
</li>
<li class="list_el">Menu
</li>
<li class="list_el">Contact
</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Additional Navigation bar on click

I have a navigation bar with the section "Contracts" and I was wondering if it were possible, and how would I go about adding an additional navigation bar to expand underneath when this button is tagged, (For example, on the Apple Store site, when you click a product, this adds another bar)
I can provide my entire CSS style sheet if needed! I think this will require JavaScript but I'm trying to keep it as pure CSS for now!
All help is greatly appreciated!
HTML Code: This is the Navigation HTML
<header>
<div class="title">
<img src="img/logo2.png"/>
</div>
<div class="navbar">
<ul>
<li style="float: left">Home</li>
<li>Contracts</li>
<li>About Us</li>
<li>Other</li>
<li> Release Notes</li>
<li> <a target="_blank" href="http://www.phpartnership.com">Pinnacle Health Partnership</a></li>
</ul>
</div>
</header>
Creates this
CSS Code: My entire stylesheet
body {
background-color: #fff;
margin: 0;
font-family: Arial;
color: #333;
}
header {
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
.navbar {
display: block;
text-align: center;
}
.navbar ul {
list-style-type: none;
padding: 0;
margin: 0;
overflow: hidden;
}
.navbar li {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
overflow: hidden;
}
.navbar li:before {
content: "";
position: absolute;
z-index: -1;
left: 50%;
right: 50%;
bottom: 0;
background: white;
height: 4px;
-webkit-transition-property: left, right;
transition-property: left, right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.navbar li:hover:before, navbar li:focus:before, .navbar li:active:before {
left: 0;
right: 0;
}
.navbar li a {
padding: 25px;
display: block;
height: 100%;
color: white;
text-decoration: none;
}
.title {
height: 80px;
padding: 2px;
background-color: #fff;
}
.container {
margin-top: 150px;
padding-top: 50px;
}
.home {
margin-top: 10px;
text-align: center;
padding: 40px !important;
}
.wrap {
width: 100%;
margin: 0 auto;
}
.left_col {
float: left;
width: 50%;
}
.right_col {
float: right;
width: 50%;
}
.right_col img {
width: 80%;
margin-top: 50px;
border: 2px solid black;
border-radius: 5px;
}
.left_col img {
width: 80%;
margin-top: 50px;
border: 2px solid black;
border-radius: 5px;
}
This is the JavaScript I tried to use to hide and show the div on click
<script>
$(index.php).ready(function(){
``$("#contract").click(function(){
$("<div class="contracts">").toggle();
});
});
</script>

guess you want smth like this : jsfiddle
first add jQuery to your local environment
use this <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
add it in the head section of your html. for more info check how to install jQuery
added html inside the .navbar
<ul class="aditional">
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
</ul>
added css :
.aditional {
position:absolute;
top:100%;
width:100%;
background:#000;
display:none;
}
.aditional li {
color:#fff;
}
added js :
$('.navbar ul li:nth-child(2) a').click(function() {
$(".aditional").slideToggle()
});
OR if you want a more responsive solution
check this :jsfiddle with target
use data-target on the li a like this
<li>Contracts</li>
<li>About Us</li>
added html :
<ul class="aditional contracts">
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
</ul>
<ul class="aditional aboutus">
<li>about</li>
<li>about</li>
<li>about</li>
<li>about</li>
</ul>
jq added :
$('.navbar ul li a').click(function() {
$(".aditional").slideUp()
var target = '.' + $(this).data('target');
$(target).slideDown();
})
OR u can target the href of the li a. simply add this
<li>Contracts</li>
<li>About Us</li>
------
<ul class="aditional" id ="contract">
....
<ul class="aditional" id ="about">
....
and js :
$('.navbar ul li a').click(function() {
$(".aditional").slideUp()
var target = $(this).attr('href');
$(target).slideDown();
})
see here jsfiddle
one of these solutions should work for you . let me know

OnMouseOver - add CSS to different tags than the hovered tag

I have a menu bar and around it a <div>, I have an <a> in the <div>, and when I hover the mouse on the <a> I want the left border color to change in the <div>. How can i do that?
I want to add a CSS-style to the <div> when I hover on the <a> link.
Html:
<div id="meny" class="meny">
Home
</div>
Css:
a.linksM{
color: black;
display: inline-block;
padding: 10px;
margin: 0px;
font-size: 13pt;
font-family: "vandetta", "arial", sans-seriff;
font-weight: bold;
}
div.meny{
border: solid 4px;
border-color: #82b919;
background-color: #82b919;
border-radius: 5px;
border-bottom-color: #006600;
border-top-color: #006600;
border-top: 0px;
}
#home:hover{
border-left-color: #006600;
}

The best way to do this is via CSS. In particular, you can use the pseudoclass hover
div a:hover {
border-left: 1px solid blue;
}
It's also possible to do this in native JavaScript
var myLink = document.querySelector("div a");
myLink.addEventListener("mouseover", function() {
this.parentNode.classList.add("new-border");
});
myLink.addEventListener("mouseout", function() {
this.parentNode.classList.remove('new-border');
});
And in jQuery as well
$("div a").on("mouseover", function() {
$(this).parent().addClass("new-border");
})
.on("mouseout"), function() {
$(this).parent().removeClass("new-border");
});

If you want to do it using jQuery then following code will help you.
$(document).ready(function(){
$("div a").mouseover(function(){
$("div").addClass("classname");
});
$("div a").mouseout(function(){
$("div").removeClass("classname");
});
});

You can use jQuery .parent() to target the div containing your link.
$('a').hover(function() {
$(this).parent().toggleClass('green-border');
});
Here is an example : http://jsfiddle.net/lddz/5kdo4bcm/1/

I would recommend against using javascript to achieve this.
This can be achieved using CSS in several different ways.
Here is a jsFiddle
If you use a HTML strucure for a basic menu:
<nav>
<ul>
<li>
<a href='#'>Link 1</a>
</li>
<li>
<a href='#'>Link 2</a>
</li>
<li>
<a href='#'>Link 3</a>
</li>
</ul>
</nav>
Then you can add CSS like this:
nav a {
text-decoration: none;
display: block;
padding: 6px 10px;
border-left: 2px solid transparent;
}
nav a:hover {
border-left: 2px solid red;
}

give the div 2 classes
HTML code
<div id="link-container" class="normal">
Link Name
</div>
CSS code
div.normal {
position: relative;
margin: 0 0 0 3px;
padding: 5px 20px;
width: 100px;
height: 50px;
background: none;
color: rgba(0, 0, 0, 1);
border: 2px groove rgba(0, 0, 0, 1);
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}
div.hover {
border-left: 5px solid purple;
margin: 0;
}
#link {
color: black;
font-family: "Courier New";
font-weight: 400;
line-height: 50px;
text-decoration: none;
text-align: center;
width: 100%;
height: 100%;
}
#link:hover {
font-weight: 900;
text-decoration: underline;
}
Javascript/jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#link-container').removeClass('hover'); //prevents on load accidental hover and glitching
$('#link').on('mouseover', function(){
$('#link-container').addClass('hover')}).on('mouseout', function() {
$('#link-container').removeClass('hover')
});
});
</script>

jQuery Submenu not disappearing unless it is hovered once

Here is the html code:
<div class="main-nav main-nav-default">
<div class="container">
<div class="main-nav-logo">
<a class="logo-color" href="index.html">Centaur <span class="brand">Research</span></a>
</div>
<div class="main-nav-links">
<ul id="responsive">
<li>Home</li>
<li>About</li>
<li class="dropdown">Services
<ul class="dropdown-lists">
<li>Research Sector</li>
<li>Online Research</li>
<li>Travel Research</li>
</ul>
</li>
<li class="dropdown">Panel
<ul class="dropdown-lists">
<li>Discussion Group</li>
</ul>
</li>
<li>Contact</li>
<li class="dropdown">Language
<ul class="dropdown-lists">
<li><div class="translate"><div id="google_translate_element"></div></div> <script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, gaTrack: true, gaId: 'UA-38654447-1'}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script></li>
</ul>
</li>
</li>
</ul>
</div>
</div>
Here is the jQuery:
$(".dropdown-lists").hide();
$(".dropdown").mouseenter(function(){
$(this).find(".dropdown-lists").slideDown();
$(".dropdown-lists").mouseleave(function(){
$(this).slideUp();
});
});
Basically the thing is that the dropdown works perfectly when I hover over it but it doesnt disappear unless I hover over the submenu thats .dropdown-lists class. If I hover over the .dropdown class and navigates away without hovering over the submenu the submenu doesn't disappear. It stays still unless I hover it over at least once.
I understand my jQuery only allows to slide the menu Up when it is hovered once, I want to know a code combination that would work even if I don't hover over the submenu.
Additionally here is the Dropdown CSS code, I doubt the the submenu somehow is not a child element of the parent main-nav-link or #responsive:
.main-nav-links {
padding: 20px 0px 20px 0px;
}
#responsive {
text-align: right;
}
#responsive li {
position: relative;
text-align: right;
display: inline-block;
}
#responsive li > a {
font-family: "Open Sans";
font-weight: 700;
padding-right: 10px;
font-size: 14px;
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: none;
color: #fff;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
#media (max-width: 992px){
#responsive li > a {
font-size: 12px;
}
}
#responsive li > a:hover {
color: #19B5FE;
}
.dropdown-lists {
text-align: center;
}
#responsive li .dropdown-lists li {
list-style: none;
margin-left: -29px!important;
border-top: 1px solid rgba(60,60,60,0.9);
padding: 10px 0px 10px 0px;
}
#responsive li .dropdown-lists li > a {
color: rgba(204,204,204,0.8);
font-size: 12px;
font-weight: 400;
}
#responsive li .dropdown-lists li > a:hover{
color: #fff;
}
#responsive li .dropdown-lists {
width: 200px;
position: absolute;
top: 200%;
background: rgba(51, 51, 51, 0.8);
}

Update your jquery like this.
$(".dropdown-lists").hide();
$(".dropdown").mouseenter(function(){
$(this).find(".dropdown-lists").slideDown();
}).mouseleave(function(){
$(this).find(".dropdown-lists").slideUp();
});
DEMO
EDIT:
Additional problem comes for the dropdown in your latest fiddle because of the top property you have used in the dropdown CSS. Update the following class in your CSS.
#responsive li .dropdown-lists {
width: 200px;
position: absolute;
top: 100%; /* It was 200% earlier */
background: rgba(51, 51, 51, 0.8);
}
.dropdown
{
height:40px;
}
Updated DEMO