I am trying to make a nav menu for part of a practice website, and I made an animation that basically slides down a green div when one of the menu options are hovered over, but once that happens the whole nav menu slides down. which I do not want. I tried changing the nav menus position to absolute, but then it looses its position, and I can't re-position it. Any help would be appreciated, thank you!
Here is the JSfiddle version.
HTML:
<ul id="nav_animations">
<li class="nav_square home_square" id="greenHome"></li>
</ul>
<ul id="navlist">
<li class="navlistitems" id="home">Home</li>
</ul>
CSS:
#nav_animations {
display:inline;
position:relative;
bottom:13px;
}
#greenHome {
display:none;
}
.nav_square {
background-color:green;
width:100px;
height:15px;
z-index:22;
position:relative;
}
#navlist {
display:inline;
font-family: 'Dhurjati', sans-serif;
font-size:45px;
position:relative;
}
.navlistitems {
display:inline;
padding:50px;
color:black;
}
JavaScript:
$(document).ready(function(){
$('#home').hover(function(){
$('#greenHome').slideToggle('fast');
});
});
PS: Yes I do have the JQuery library linked in my actual code.
The quick and dirty solution using your work is as follows below. If you wanted the green dropdown to be below the parent nav item, you should add ul#nav_animations inside the li.navlistitems. That's what I've done below. I also modified your CSS a little to take this into consideration.
And here is a JSFiddle I threw together for you: http://jsfiddle.net/84amnjz7/1/
CSS:
#navlist {
margin: 0;
padding: 0;
list-style-type: none;
font-family: 'Dhurjati', sans-serif;
font-size: 45px;
position: relative;
}
.navlistitems {
position: relative;
padding: 25px 0 0;
display:block;
float: left;
color: #000;
}
#nav_animations {
display: block;
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
list-style-type: none;
width: 100%;
}
#greenHome {
display: none;
}
.nav_square {
background-color: green;
width: 100%;
height: 15px;
z-index: 22;
position: relative;
}
jQuery:
$(document).ready(function(){
$('#home').hover(function(){
$('#greenHome').stop(true, true).slideToggle('fast'); /* ADDED .stop(true, true) */
});
});
Modified HTML:
<ul id="navlist">
<li class="navlistitems" id="home">Home
<ul id="nav_animations">
<li class="nav_square home_square" id="greenHome"></li>
</ul>
</li>
</ul>
Related
I've created a utility and main navigation bar for this self-project I'm working on, and I want the main nav to become sticky when I scroll 42px.
However, when I scroll the navigation bar doesn't stick at the top of the window. I tested it with the utility nav, and it worked perfectly. Here is my coding for the main nav bar...
$(window).on("scroll", function () {
var distanceScrolled = $(window).scrollTop();
console.log("The distance scrolled is: " + distanceScrolled);
if(distanceScrolled>42){
$("#main-nav").addClass("scrolled");
}
else{
$("#main-nav").removeClass("scrolled");
}
});
#main-nav {
position: relative;
width: 100%;
height: 100px;
background-color: #000000;
}
.main-nav-left {
list-style: none;
float: left;
padding-left: 28px;
height: 100px;
}
.main-nav-items {
position: absolute;
top: 40%;
left: 290px;
list-style: none;
text-decoration: none;
}
.main-nav-items li {
display: inline-block;
padding-right: 12px;
margin-right: 13px;
}
.main-nav-right li {
float: right;
padding-right: 12px;
margin-right: 26px;
margin-top: 40px;
list-style: none;
}
#main-nav a {
text-decoration: none;
color: #ffffff;
}
.scrolled {
position: fixed;
top: 0;
z-index: 1000;
}
<nav id="main-nav">
<ul class="main-nav-left">
<li><img src="images/thule_logo.png" height="100" width="auto"></li>
</ul>
<ul class="main-nav-items">
<li>CARRIERS & RACKS</li>
<li>ACTIVE WITH KIDS</li>
<li>LUGGAGE & BAGS</li>
<li>SLEEVES & CASES</li>
<li>EXPLORE THULE</li>
</ul>
<ul class="main-nav-right">
<li><i class="fas fa-search fa-lg"></i></li>
</ul>
</nav>
<script src="js/jquery-v3.3.1.js"></script>
<script src="js/main.js"></script>
First of all there is no 'nav' class defined for your html nav element. So in jQuery selector, you need to select by the id(main-nav) as you have defined or by HTML nav element itself. you can do this:
if(distanceScrolled>42){
$("nav").addClass("scrolled");
}
else{
$("nav").removeClass("scrolled");
}
or
if(distanceScrolled>42){
$("#main-nav").addClass("scrolled");
}
else{
$("#main-nav").removeClass("scrolled");
}
But add jQuery library file prior to your custom script.
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous">
</script>
second and the most important thing is that you are adding a class(scrolled) having {position:fixed}. Since Id has higher priority than Class so it won't allow class to overwrite the common CSS property, like in this case 'position'. So you can add !important to class selector's property:
.scrolled{
position:fixed!important;
top: 0;
z-index: 1000;
}
or
write deep CSS selection to make it's priority higher than Id. Like:
#main-nav.scrolled {
position:fixed;
top: 0;
z-index: 1000;
}
Both will work.
I understand this seems to be a common request but after digging through several posts I can't find a solution and/or lack the knowledge to tailor the javascript to my needs.
I am looking for a way to have my Navbar stick to the top of the page once it reaches the top (scrolling far enough down). The issues I have is that my Navbar is currently positioned using flex, and not already at the top of the page.
CODEPEN
* {margin:0;padding:0;box-sizing:border-box}
html, body {text-align: center;}
#logo2 img {
margin: 0 auto;
margin-top: 3%;
}
.menu2 {
display: flex; /* displays children inline */
margin: 0;
width: 100%;
margin-top: 2%;
list-style-type: none;
background: linear-gradient(#3E3E3E, #2B2B2B);
}
li {
flex: 1; /* each takes as much width as it can, i.e. 25% */
border-right: 1px solid #232323;
}
li:last-child {
border: none;
}
li a {
display: block;
text-align: center;
font: Verdana;
font-size: 16px;
color: #EAE0D2;
text-decoration: none;
padding: 20px 0;
}
li a:hover {
background: linear-gradient(#404040, #3E3E3E);
}
.active {
background: linear-gradient(#2B2B2B, #232323);
}
<header id="logo2">
<img src="logo.png" alt="Logo"/>
</header>
<nav>
<ul id="navigation" class="menu2">
<li>HOME</li>
<li class="active">GALLERY</li>
<li>ART</li>
<li>CONTACT</li>
</ul>
</nav>
</body>
Well I eventually found an answer to my question. For those of you interested.
JS
var num = 240; //number of pixels before modifying styles
$(window).bind('scroll', function () {
if ($(window).scrollTop() > num) {
$('.menu2').addClass('fixed');
$('.main').addClass('main2');
} else {
$('.menu2').removeClass('fixed');
$('.main').removeClass('main2');
}
});
.menu2 {
width: 100%; height: 100%;
background-color: rgb(240, 240, 240);
position: sticky;
left: 0; top: 0;
}
.emptySpace {width: 100%; height: 1000000px;}
<span class="menu2">
Link 1
Link 2
Link 3
Link 4
Link 5
</span>
<!-- the div below is to allow you to scroll so you can see how it works (it's absolutely useless) -->
<div class="emptySpace"></div>
If I'm understanding your question correctly, you can use
HTML:
<span class="menu2">
Link 1
Link 2
Link 3
</span>
CSS:
.menu2 {position: sticky;}
This will cause the navigation bar to stick to the top of the screen as the user scrolls down.
You can read into this a bit more at W3Schools.
Also, check out my Weave at LiveWeave.
I m developing a site and I m about to add a little bit of transition to the nav bar, but I have few bugs can anybody help.
The Objective is when you scroll down the nav elements gets hidden and the logo of the site will be at the fixed position, if you move hover logo the nav appears again.
I think it still needs to be fixed.
Reference Navigation bar: https://www.barackobama.com/
.logo{
position: fixed;
}
.navigation{
position: fixed;
margin: 50px 20px;
display: block;
}
ul li{
padding: 0 30px;
display: inline-block;
}
ul li a{
color: #646464;
text-transform: uppercase;
font-weight: 600;
}
ul li a:hover{
color: #BE9503;
text-decoration: none;
}
.main{
min-height: 1200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navig" id="navhome">
<div class="logo">
<img src="images/logo-4.png" width="70">
</div>
<nav id="navMain" class="navMain">
<ul class="navigation">
<li>Dr Ganesh</li>
<li>Connect</li>
<li>Achievers</li>
<li>News</li>
<li>Gallery</li>
</ul>
</nav>
</div>
<div class="main"></div>
<script type="text/javascript">
$(window).scroll(function(){
if($(this).scrollTop()>100)
{
$('.navMain').fadeOut();
}
else
{
$('.navMain').fadeIn();
}
$('.navig').mouseenter(function(){
$('.navMain').show();
});
$('.navig').mouseleave(function(){
$('.navMain').hide();
});
});
</script>
</div>
I have a menu comprised of HTML and CSS and I'm trying to get it so that once the user hovers over the sub level item within the menu, the div info1 will appear to the right of the menu. Ideally, I would like to do this with HTML and CSS if possible, but if there is a simpler fix with jQuery or JavaScript, that would work too. I would certainly appreciate the help.
Here's the HTML:
<body>
<div id="navigation">
<nav>
<ul class="top-level">
<li>Top-level Item
<ul class="sub-level">
<li>Sub-level Item</li>
<li>Sub-level Item</li>
<li>Sub-level Item</li>
</ul>
</li>
<li>Top-level Item
<ul class="sub-level">
<li>Sub-level Item
<li>Sub-level Item</li>
<li>Sub-level Item</li>
<li>Sub-level Item</li>
</ul>
</li>
</nav>
</div>
<div ID="info1">
<center><img src="image.jpg" border="0" height=170 width=250 ></center><br><center><table BORDER=4 CELLPADDING=6 ><tr><td><br>I want this div to display on the right side of the screen once the mouse has hovered over a sub-level menu item.<br><br></td></tr></table></center>
</div>
</body>
and here's the CSS:
#navigation
{
width: 200px;
font-size: 0.75em;
}
#navigation ul
{
margin: 0px;
padding: 0px;
}
#navigation li
{
list-style: none;
}
ul.top-level li
{
border-bottom: #fff solid;
border-top: #fff solid;
border-width: 1px;
}
#navigation a
{
color: #fff;
cursor: pointer;
display:block;
height:25px;
line-height: 25px;
text-indent: 10px;
text-decoration:none;
width:100%;
}
#navigation li:hover
{
background: #f90;
position: relative;
}
ul.sub-level
{
display: none;
}
li:hover .sub-level
{
background: #999;
border: #fff solid;
border-width: 1px;
display: block;
position: absolute;
left: 200px;
top: -1px;
}
ul.sub-level li
{
border: none;
float:left;
width:200px;
}
#info1
{
font-family: "Verdana,Arial,Helvetica";
size: -1;
display: none;
}
*/ I thought this might work*/
li:hover .top-level li:hover .sub-level + #info1
{
display: block;
}
The code can be viewed at http://jsfiddle.net/brisket27/C5Pn9/7/
You can not go back or traverse the dom up with CSS. "There are no parent selectors in CSS, not even in CSS3" via CSS-Tricks
You can solve your problem with some basic jquery:
Demo: jsFiddle
$('.top-level li .sub-level li').on('mouseover', function() {
// Position #info1 off to the side of the .sub-level
$('#info1').css({
'top': $(this).parent('.sub-level').position().top,
'left': $(this).parent('.sub-level').position().left + $(this).parent('.sub-level').outerWidth(),
});
$('#info1').show();
}).on('mouseleave', function() {
$('#info1').hide();
});
The current code puts #info1 next to the sub-level. If you want #info1 always on the absolute right side of the screen, remove the position code in the js and just apply right: 0; to #info1 in CSS.
Your approach was in a correct direction. I'll try to explain why this code did not work -
*/ I thought this might work*/
li:hover .top-level li:hover .sub-level + #info1 {
display: block;
}
This is Adjacent sibling combinator, applicable to only the 'Adjacent' siblings.
In your case, div #info1 is outside the nav logic.
Your CSS rule would work if the div you want to display was placed right after the ul li's
for ex.
1) In the following example Divs #one and #two are adjacent.
<div = "one">I</div>
<div = "two">II</div>
but the one mentioned below are not.
<div = "cover">
<div = "one">I</div>
</div>
<div = "two">II</div>
2) As mentioned, here
<ul class="sub-level">
<li>Sub-level Item
</li>
</ul>
<div id="test">HERE IS A DIV</div> <!-- This div is adjacent to ul -->
and a CSS rule, will WORK!
ul.sub-level:hover + #test { /* This works because #test and ul.sub-level are adjacent*/
display: none;
}
Said that, I guess it will be easier for you to go for option like jquery to implement your logic instead of CSS.
$(document).ready(function(){
$('ul.sub-level li').mouseenter(function(){
$('#info1').show();
});
$('ul.sub-level li').mouseleave(function(){
$('#info1').hide();
});
});
Use the following snippet using jquery for the hover effect:
$(".sub-level>li").mouseenter(function() {
$("#info1").show();
}).mouseleave(function() {
$("#info1").hide();
});
To display the block on right of the screen you can use either use:
#info1 {
position: absolute; right:0;
}
or
#info1 {
float:right;
}
The CSS:
#divMainMenu ul {
list-style-type: none;
padding: 5px 0;
height:400px;
}
#divMainMenu li {
height: 17px;
margin: 3px 0;
padding: 14px 2px;
border: 1px solid #eee7cb;
background: url(../../Images/50pTransparent-20x20.png) repeat;
}
#divMainMenu li ul{
display: none;
}
The html and script:
<script type="text/javascript">
function Show(pObj)
{
pObj = document.getElementById(pObj).id;
if (document.getElementById(pObj).style.display=='none')
document.getElementById(pObj).style.display='block';
else
document.getElementById(pObj).style.display='none';
}
</script>
<div id="divSidePanel">
<div id="divMainMenu">
<ul>
<li onclick="Show('Buyers')">Buyers
<ul id="Buyers" style="display:none;">
<li>Search</li>
<li>Submit request</li>
<li>Send message to owner</li>
</ul>
</li>
<li>Sellers</li>
<li>Contact Us</li>
</ul>
</div>
</div>
The problem:
When I click on the text Buyers, it shows the sub/nested list. However, the other items do not make space for the nested list. Thus the nested list writes over the space of the main list.
Is this a problem with my code or is it the standard way it's meant to work? And is there a way to let the other items 'push down' making way for the nested items?
Thanks!
You need to use min-height: instead of height: in the CSS. If you know jQuery, the .hide() and .show() functions will work MUCH better.
Take this out of your css:
#divMainMenu li ul{
display: none;
}
And change the height property to min-height on your #divMainMenu li selector
Resultant css:
#divMainMenu ul {
list-style-type: none;
padding: 5px 0;
height:400px;
}
#divMainMenu li {
min-height: 17px;
margin: 3px 0;
padding: 14px 2px;
border: 1px solid #eee7cb;
background: url(../../Images/50pTransparent-20x20.png) repeat;
}
#divMainMenu li ul{
}
Example