I would like to implement this kind of menu navigation (http://cnn.com), when you click the hamburger icon it open the menu nav. I'm not sure if this is modal, anyone knows how to create the html, css, and jquery for this kind of menu nav?
Here's something to get you started:
$hamberger = $("#hambergerMenu");
$("#triggerMenu").click(function() {
$hamberger.show(500);
});
$("#closeHamberger").click(function() {
$hamberger.hide(500);
});
#hambergerMenu {
position: fixed;
display: none;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: #a6a6a6;
}
#closeHamberger {
margin: 10px;
position: fixed;
right: 0;
font-size: 2em;
top: 0;
text-decoration: none;
color: white;
}
#hambergerMenu ul {
list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<img id="triggerMenu" src="http://neil.computer/stack/3line.png" />
<div id="hambergerMenu">
<a id="closeHamberger" href="javascript:void(0)">X</a>
<ul>
<li>
Content
</li>
<li>
Good Content
</li>
<li>
Bad Content
</li>
<li>
Meh Content
</li>
<li>
SO Content
</li>
</ul>
</div>
Related
This question already has an answer here:
Why does clip-path (and other properties) affect the stacking order (z-index) of elements later in DOM?
(1 answer)
Closed 2 years ago.
I made my navigation bar and positioned it (fixed), and it works fine. I was able to scroll down and all. As soon has I added filter (brightness) to it the image on my page, the navigation bar disappeared. I have tried using pseudo-elements and setting the position (absolute/relative), I set the filter property to the container of the child element of the image, it still didn't work. Can someone help me on how to have my navigation bar display on fixed position and still have the image filtered. Thanks in Advance.
nav {
position: fixed;
background-color: #fff;
}
nav ul {
margin: 0;
padding: 0;
}
.navbar-brand {
padding-right: 20px;
}
nav li {
display: inline-block;
padding: 10px;
}
nav a {
color: #000;
text-decoration: none;
}
nav a:hover {
color: #ff6600;
text-decoration: none;
}
.title-image img {
width: 100%;
height: 300px;
filter: brightness(60%);
}
<nav>
<ul>
<li>
<a class="navbar-brand" href="#">Navbar Brand</a>
</li>
<li>
Home
</li>
<li>
About
</li>
<li>
services
</li>
</ul>
</nav>
<div class="title-image">
<img src="https://images.unsplash.com/photo-1599546824091-f49550ce8cbc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
</div>
JSfiddle Demo
Just add z-index to your nav element as follow
nav{
position: fixed;
background-color: #fff;
z-index:999;
}
nav ul{
margin: 0;
padding: 0;
}
.navbar-brand{
padding-right: 20px;
}
nav li{
display: inline-block;
padding: 10px;
}
nav a{
color: #000;
text-decoration: none;
}
nav a:hover{
color: #ff6600;
text-decoration: none;
}
.title-image img{
width: 100%;
height: 300px;
filter: brightness(60%);
}
<nav>
<ul>
<li>
<a class="navbar-brand" href="#">Navbar Brand</a>
</li>
<li>
Home
</li>
<li>
About
</li>
<li>
services
</li>
</ul>
</nav>
<div class="title-image">
<img src="https://images.unsplash.com/photo-1599546824091-f49550ce8cbc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
</div>
The navbar didn't disappear, it is just beneath the image. To have it in front, you should use z-index: 10; (or any value greater than 0).
See more at : https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
In addition, keep in mind that your image - or any element after your navbar - will be positioned on top of your page. May be you'll want to let the equivalent of the navbar height as space before any content.
The problem I have is when I go to the navigation menu and have the menu come down, instead of being one item per line it goes across the screen from left to right
I get [Item 1] [Item 2] [Item 3] instead of:
[Item 1]
[Item 2]
[Item 3]
I think it has something to do with the navigation bar with my drop down menu (or lack thereof) want to leave. Any suggestions?
#navbar {
position: fixed;
top: 0px;
left: 0px;
z-index: 999;
width: 100%;
}
.nav {
width: 1800px;
height: 70px;
margin: auto;
position: absolute;
left: 0px;
top: 0px;
background-color: #DD0205;
}
.margin {
margin: 0;
display: inline-block;
}
#searchbox {
padding 5px;
font-size: 1em;
line-height: 100px;
}
#magnify-search {
text-indent: -99999px;
width: 25px;
height: 25px;
display: block;
background: transparent url(magnify.jpg) 0 0 no-repeat;
}
ul.cssMenu,
ul.cssMenu ul {
list-style: none;
margin: 1;
padding: 0;
position: relative;
}
ul.cssMenu ul {
display: none;
;
/*initially menu item is hidden*/
position: absolute;
}
/* Hover effect for menu*/
ul.cssMenu li:hover > ul {
display: block;
}
li {
display: inline;
}
<input type="search" id="searchbox" value placeholder="Search">
<div class="margin">
<input type="button" id="magnify-search" />
</div>
<ul class="cssMenu">
<li class="Eco-Fashion">
<b>Eco-Fashion</b>
<ul>
<li>Tops
</li>
<li>Bottoms
</li>
<li>Outwear
</li>
<li>Shoes
</li>
<li>Jewelry
</li>
</ul>
</li>
<li>    </li>
<li class="GreenBeauty">
<b>Green Beauty</b>
<ul>
<li>Soy Makeup
</li>
<li>Soy Blush
</li>
<li>Soy
</li>
</ul>
</li>
<li>    </li>
<li class="GreenLifestyle">
<b>Green Lifestyle</b>
<ul>
<li>Leaf Pants
</li>
<li>Coconut Bra
</li>
<li>Wilson Volleyball
</li>
</ul>
</li>
<li>    </li>
<li class="Sale">
<b>Sale</b>
</li>
</ul>
</div>
</div>
What happened?
You have specified <li> to display as inline elements. This rule force all <li> elements to behave like a normal text. It means that it will appear in one line and will have white spaces between element (like between words in a paragraph).
Where is that piece of code?
You have CSS rule that looks like this
li {
display: inline;
}
in a very bottom of your code snippet.
What to do?
If you want them to be under each other use display: block instead.
Anything else?
Yes. Your menu have very strange behavior and I'd recommend you to take a look at jQuery Accordion
I may seem really silly or outright wrong in the way I code. However, when I create a drop down menu in CSS the new li elements get pushed to the other side of the page and not in the container box. How would I fix this?
Here is the code:
<nav>
<div class="wrapper">
<div class="brand">
<img class="UKLogo" src="images/logo.png" alt="">
</div> <!-- brand -->
<div class="navigation">
<ul class="nav-ul">
<li> HOME </li>
<li> ABOUT </li>
<a href="#">
<li class="course-li">
COURSES
<ul class="drop-down">
<li class="list-item"> Driver CPC </li>
<li> First Aid </li>
<li> Other </li>
</ul>
</li>
<li> CONTACT </li>
<!-- <li> TESTOMONIALS </li> -->
<!-- <li> FAQs </li> -->
</ul>
</div> <!-- Navigation -->
</div> <!-- Wrapper -->
</nav>
nav {
margin: 0px;
padding: 0px;
height: 75px;
background-color: #FFF;
}
.brand {
margin: auto;
width: 960px;
}
.company-name {
padding: 0px;
margin: 0px;
}
.UKLogo {
padding: 0px;
margin: 0px;
position: relative;
top: 11px;
}
.navigation ul li {
display: inline-block;
margin: 10px;
position: relative;
left: 380px;
top: -46px;
}
.navigation ul a {
color: black;
margin-left: 40px;
text-decoration: none;
font-family: Lato;
font-weight: 300;
}
.navigation ul a:hover {
color: #169ec5;
font-weight: 300;
}
.course-li:hover .drop-down {
left: 0px;
}
.drop-down {
position: absolute;
left: -5px;
z-index: 1;
background-color: white;
left: -9999px;
}
Thank you ever so much for looking and helping. Always open to criticism whether its the way I code or anything else.
Here is a JSFiddle https://jsfiddle.net/vj41qLts/
Many Thanks!
You need to declare a position in the parent, for the child to reside in. An element with position: absolute; will position itself to the first parent with position: relative;. If there is no parent with position: relative;, it will use the browser window instead.
See fix example here: https://jsfiddle.net/vj41qLts/1/
I think there are two thing you need to change:
ul li will select everything li in the navigation even the dropdown, ul>li will only select the immediate child, instead of running down the nested elements.
you need to add position:relative; in your dropdown's parent.
One of the first issues I see is the fact that your markup for your main links isn't setup correctly. Following a structure more link the below should give make it work the way you want it to:
<nav>
<ul>
<li><a href="#">Home<a></li>
<li><a href="#">About<a></li>
<li>
<a href="#">Courses<a>
<div>
<ul>
<li>A link</li>
<li>A link</li>
</ul>
</div>
</li>
</ul>
</nav>
Then use CSS or JS to control showing and hiding the dropdown of links.
HTML
<body>
<div class="wordsmith">
<p>WORDSMITH: dummy text here.</p>
</div>
<div class="menu">
<ul>
<li><a id="wordsmith">The Wordsmith</a></li>
<li><a id="tracksmith">The Tracksmith</a></li>
<li><a id="nerdsmith">The Nerdsmith</a></li>
<li><a id="family">The Family Man</li>
</ul>
</div>
CSS
.menu {
background: rgba(0,0,0,0.6);
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
text-align: center;
}
.wordsmith {
background: rgba(0,0,0,0.6);
max-width: 500px;
margin: 0 auto;
padding: 15px;
display: none;
}
.menu #wordsmith:hover ~ .wordsmith {
display: block;
}
I have a menu centered in the middle of the page with text links in an UL. What I'm trying to achieve is on hovering over one of the menu items, a div with information will appear up top. The original solution to this I found here (JS Fiddle). If I try to achieve this outside of a div and UL, everything works. As soon as I put the menu items in a div OR an UL, the CSS breaks. Am I calling the CSS selector correctly with the ".menu #wordsmith" part? Any help is appreciated! Keep in mind, I'm trying to do this strictly with CSS and html, not JS. Thanks.
AFAIK the are no predecessor or ancestor combinators/selectors so this is not possible in CSS. ~ is the general sibling combinator and #wordsmith and .wordsmith are not siblings, .wordsmith is a predecessor of an ancestor of #wordsmith.
If you really need to do this you'll have to use JavaScript or re-factor your HTML.
demo - http://jsfiddle.net/n5fzB/229/
with jQuery you can do this
$("#f").hover(
function() {
$('.ab').css('display', 'block');
$('.a').css('display', 'none');
},
function() {
$('.ab').css('display', 'none');
$('.a').css('display', 'block');
}
);
$("#s").hover(
function() {
$('.abc').css('display', 'block');
$('.a').css('display', 'none');
},
function() {
$('.abc').css('display', 'none');
$('.a').css('display', 'block');
}
);
.abc,.ab {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li><a id="f">Show First content!</a></li>
<li><a id="s">Show Second content!!</a></li>
</ul>
<div class="a">Default Content</div>
<div class="ab">First content</div>
<div class="abc">Second content</div>
Musa is right, you can't target #wordsmith and do something with another element that isn't a sibling or child. But you can do something else. (disclaimer: I don't love using absolute positioning and I treat it as a last result) But if this has to be done with CSS only...you could put the text inside the li and use position:absolute to display it above like you wanted. Check out the fiddle below to see what I mean:
HTML
<div class="menu">
<ul>
<li>
<a id="wordsmith">The Wordsmith</a>
<p>WORDSMITH: dummy text here.</p>
</li>
<li>
<a id="tracksmith">The Tracksmith</a>
<p>TRACKSMITH: dummy text here.</p>
</li>
<li>
<a id="nerdsmith">The Nerdsmith</a>
<p>NERDSMITH: dummy text here.</p>
</li>
<li>
<a id="family">The Family Man</a>
<p>FAMILY: dummy text here.</p>
</li>
</ul>
</div>
CSS
.menu {
background: rgba(0,0,0,0.6);
margin: auto;
position: absolute;
top: 100px; left: 0; bottom: 0; right: 0;
text-align: center;
padding: 100px 0 0;
}
.wordsmith {
background: rgba(0,0,0,0.6);
max-width: 500px;
margin: 0 auto;
padding: 15px;
}
.menu ul{
position: relative;
}
.menu li p{
display: none;
position: absolute;
top: -100px;
left: 0;
right: 0;
}
.menu li a:hover + p{
display: block;
}
FIDDLE
I'm working on a fancy menu of some sort, but cant seem to get my head around a problem currently facing. Here's a image to illustrate the problem:
The whole thing is built using a nav tag that has a ul with li children.
Basically the right box thingy has to always stay on the top row, right edge, and when the windows is shrunken or smaller, this position/behavior has to maintain, and the other regular menu items should collapse on the second row.
The 2 boxes have to maintain a order: the one on the left is the first li element, and the one on the right is the last li element
Here's what I've tried so far:
-position absolute wont cut it, because it will indeed stay on the right, but it may or may not overlay the other elements(current situation);
-floating it, will probably collapse with the other elements on the next row
-adding a padding right to the nav or ul tag, will work, however, the other menu items will always have a right margin that wont allow them to ever fall under the right boxy thing;
Heres a js fiddle to the problem(shrink the results window): menu issue
I'm open to any ideas, even changing the whole markup if that's the solution, or some fancy js if its working. Thank you!
The markup used:
<nav class="secondary-navigation main-section">
<ul class="align-left secondary-navigation-list">
<li class="menu-item-block">
</li>
<li>
Menu Item
</li>
<li>
Menu Item
</li>
<li>
Menu Item
</li>
<li>
Menu Item
</li>
<li>
Menu Item
</li>
<li>
Menu Item
</li>
<li>
Menu Item
</li>
<li>
Menu Item
</li>
<li class="menu-item-block menu-last-item-block">
</li>
</ul>
The css used:
a{
text-decoration: none;
color: #656565;
padding: 10px;
font-size: 1.4em;
line-height: 50px;
}
.menu-item-block{
width: 50px;
height: 50px;
background: #656565;
}
.menu-last-item-block{
position: absolute;
top: 0;
right: 0;
}
ul, li {
margin: 0;
padding: 0;
list-style: none;
}
li{
float: left;
}
nav.secondary-navigation{
position: relative;
display: inline-block;
width: 100%;
}
nav.secondary-navigation:after{
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 5px;
background: #656565;
}
ul.secondary-navigation-list:after,
ul.secondary-navigation-list:before{
content: '';
position: absolute;
width: 5px;
height: 100%;
background: #656565;
}
ul.secondary-navigation-list:before{
left: 0;
}
ul.secondary-navigation-list:after{
right: 0;
}
You can do it by a little manipulation on the html and css:
change the order of the li so that the 2 special ones are on top
<ul class="align-left secondary-navigation-list">
<li class="menu-item-block">
</li>
<li class="menu-item-block menu-last-item-block">
</li>
<li>
Menu Item
</li>....
Change the css rule for secondary-navigation-list
.menu-last-item-block{
float:right;
}
see fiddle: http://jsfiddle.net/CLtCL/12/