I have a navigation bar I've built with a few links in it (using a ul with li and anchors) and I'm trying to figure out how to make certain links dropdowns with more links inside of them. I tried following the w3schools example of dropdowns but it seems like my links are just "scrunching" together. Here's the code:
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
<nav class="main-nav-container">
<ul>
<div class="dropdown">
<li>
Climb
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</div>
<li>News</li>
<li>Events</li>
<li>About</li>
<li>Donate</li>
<li>Merchandise</li>
</ul>
</nav>
What it looks like on my end is that the links are all scrunched together. I want it so that the dropdown appears on hover (so, display changes from none to block), but the actual content of the dropdown is appearing inline with the navigation links instead of underneath like it should be. What am I missing/doing wrong?
I created a stackblitz for you. Is this what you're looking for?
You can make you content display: flex; while using flex-direction: column; instead of display: block;.
If you want the dropdowns to animate in and out eventually, you'll need to use javascript unless you're a real css wizard. Basically, you'll add a visible class on mouseenter that changes the dropdown from display: none to display: block and sets the starting state of your animation, like opacity: 0. Then, after a requestAnimationFrame, you add an in class that sets the final state of your animation, like opacity: 1. The requestAnimationFrame is needed because going from none to block causes the browser to cancel any css animations.
The close animation is the same principle: you remove the in class on mouseout, then after a timeout for however long your animation is, you remove the visible class.
Related
Inside my navbar, are my links. I am trying to set a media query where the links stack and center after clicking my hamburger menu with primely CSS flex-box. What do I need to change to my code to achieve this?
I was using float, absolute and relative positioning first. At this time my navbar was working almost perfectly. However, I had to place my link with its href="home," outside of the div with class "options," so that it would remain visible after my screen size approached my media query. The positioning of my links became awkward after this so I turned to CSS flex-box.
<html>
<div>
<nav class="navbar">
<label class="menu" for="toggle">☰</label>
<input type="checkbox" id="toggle"/>
<div class="main"><li class="home">TechReality</li></div>
<div class="options">
<li class="news"></li>
<li class="products">Categories</li>
<li class="trends">Trending</li>
<li class="forum">Customer Forum</li>
<li class="about">About Us</li>
</div>
</div>
</nav>
#media only screen and (max-width: 1135px) {
.navbar .options .home{
visibility: visible;
}
.menu {
display: block;
cursor: pointer;
}
.navbar.options{
text-align: center;
visibility: hidden;
flex-basis: 100%;
flex-wrap: wrap;
}
.news, .products, .trends, .forum, .about {
border-top: 1px solid rgba(255,255,255,0.3);
border-bottom: 1px solid rgba(0,0,0,0.1);
margin: 0;
}
ul:last-of-type a {
border-bottom: none;
}
#toggle:checked + .options {
visibility: visible;
}
}
My full code can be seen in this codepen snippet https://codepen.io/ashu121805/full/XvgRqP.
There's a lot to discuss here, but I want to point out three major problems that will get you 90% of the way there, then you can tweak the styling as you see fit afterwards.
1. Fixing invalid HTML
You have an extraneous closing div tag inside of <nav class="navbar"> that should be deleted. You also have li tags inside of div, which is incorrect; an li should always be the child of either an ol or a ul. Fixing those, and deleting the extra html opening tag from the start of your snippet above, we get this:
<div>
<nav class="navbar">
<label class="menu" for="toggle">☰</label>
<input type="checkbox" id="toggle"/>
<ul class="main">
<li class="home">TechReality</li>
</ul>
<ul class="options">
<li class="news"></li>
<li class="products">Categories</li>
<li class="trends">Trending</li>
<li class="forum">Customer Forum</li>
<li class="about">About Us</li>
</ul>
</nav>
</div>
(Also, just a note: In CodePen, you don't need to include the html or body tags, nor the head section. You can also delete the script tag you have and just use the JS panel in the editor view.)
2. Making the hamburger menu work
This one is very easy to fix. Right now you are toggling your menu's visibility with this rule:
#toggle:checked + .options {
visibility: visible;
}
Problem is, the + selector only selects the immediately next sibling of an element. Since .options isn't right after #toggle, the selector doesn't work.
Instead, you can use the ~ selector, which will select all siblings after an element that match the selector:
#toggle:checked ~ .options {
visibility: visible;
}
3. Basic CSS cleanup
Once you get this far, you'll have a menu that toggles when you click the hamburger, but it'll look wonky. There's a few main things we need to do:
Make our lists (ul) not actually look like lists.
Make the links stack on top of each other vertically.
Position the links in a logical place, like right below the nav bar on the left side of the screen.
#1 can be accomplished simply:
ul {
list-style: none;
padding-left: 0;
}
#2 can be accomplished by adding these additional styles:
.navbar .options {
flex-wrap: wrap;
}
.news, .products, .trends, .forum, .about {
width: 100%;
}
Also note that you currently have a typo in your media query styles – there should be a space in .navbar .options where you currently have none.
#3 is a little more involved, but a good start would be to add these styles inside your media query:
/* force .options to wrap below since it has flex-basis: 100% */
.navbar {
flex-wrap: wrap;
}
/* remove the default margin-bottom on lists – or you could do this in your main styles above your media query */
.navbar .options,
.main {
margin-bottom: 0;
}
From there you can adjust things as you like.
So I, like all of you have a menubar (header) on top of my website
and recently found out how to use icons.
Now What I need is a menu wich at first shows ONLY the Icons and when you hover over the text (e.g. HOME, SHOP, etc.) shows up to the right of the icon.
Any way to to this with css?
Thx!
Yes, you can do this with CSS.
Here's an example:
Create a <span> class: <span class="hideBeforeShow"></span>.
<ul>
<li><span class="hideBeforeShow">Test</span></li>
</ul>
Next, make sure you make the class hidden using visibility: hidden;:
li .hideBeforeShow
{
visibility: hidden;
padding-left: 7px;
padding-right: 7px;
}
(padding is added to separate it from the icon)
Next, you'll want to make it show when you hover over the <li></li> element. After you hover over it, you can select it by adding the class name afterwards:
li:hover .hideBeforeShow
{
visibility: visible;
}
Next, you'll want to hide the icon. Set the content to nothing, or hide the image, whatever you want to do.
li:hover:after
{
font-family: none;
content '';
}
You can substitute these 'font-awesome' icons with images instead. The same concept applies.
Here's the jsFiddle example. Play with it.
I implemented the Lavalamp tab menu in my website: when Mouse goes on absolute Div "#lavalamp" bottom "subs" div not display.How to fixed this, please help me.
Detail code click here
<ul id="nav">
<li><a class="hsubs" href="#">Magento</a>
<div class="subs colbg01">
Submenu 1
</div>
</li>
<li><a class="hsubs" href="#">Wordpress</a>
<div class="subs colbg02">
Submenu 2
</div>
</li>
<li><a class="hsubs" href="#">Mobile App</a>
<div class="subs colbg03">
Submenu 3
</div>
</li>
<div id="lavalamp"></div>
The problem happens when you hover over the triangle, which causes the underlining li to lose its own hover and thus invalidating the active li:nth-child(..) ~ #lavalamp rule.
You can solve this issue with modern browsers by disabling the pointer events on the lavalamp element
#lavalamp{pointer-events:none;}
demo at http://jsfiddle.net/gaby/6Lmgkhxd/4/
Notice: IE added support for pointer-events on v11
The reason this is not working is because the hover state of the li is being broken when hovering over the #lavalamp element (which appears later in the DOM).
If you really want a CSS only fix you can use z-index to place the triangle behind everything else and bring the li forward.
like:
#nav li {
float: left;
display: block;
padding: 16px 20px 18px 20px;
z-index: 1; // <--- added this
}
#lavalamp {
z-index: -1; // add this
... other code
}
example: http://jsfiddle.net/6Lmgkhxd/3/
I changed the li's background-color to transparent to allow this to work.
Also there seems to be a slight gap between the li and the.subs so I increased the bottom padding of the li to overlap better to the 50px top positioned .subs (from 16px to 18px)
I have created a dropdown menu and now want a background that drops down along with it. Here is some of my code:
HTML:
<div id="background"></div>
CSS:
div#background{
height: 150px;
background-color: white;
display: none; }
ul#navmenu li:hover div#background
{
display: block;
}
(I know there is something wrong with this code, this is what I picked up so far from the Internet...)
li are the list items that comprise my menu.
In the HTML code, the "background" divider is inside and at the end of another divider which contains the dropdown menu:
<div id="menu">
<ul id="navmenu"></ul>
<div id="background"></div>
</div>
ul is my unordered list which contains the menu.
What I want is to have the menu drop down along with the background. The background should also cover (be on top) of the text that comes immediately after the menu. (The menu drops onto the text).
I would have loved to post a picture to make it a little clearer but I don't have enough reputation points yet... sorry :S
If possible I'd like to do it only using css, but I'm also open for other solutions. Any ideas?
Your css is for a child of the li
This html code for your CSS
<div id="menu">
<ul id="navmenu"><li><div id="background"></div></li></ul>
</div>
The background of your HTML is the sibling of navmenu.
This CSS code for your HTML to show background when hovering over navmenu.
<style>
div#background{
height: 150px;
background-color: white;
display: none; }
ul#navmenu:hover +div#background
{
display: block;
}
</style>
If you want to do that from the LI you would need a parent's, sibling selector. I don't have one and would like one but jQuery could do the trick.
Adjacent Sibling (+) combinator is available in Internet Explore 7 plus and is CSS 2.1 standard.
Assuming you want the background someplace other than inside the li block, position:relative it to the area you want it to appear.
how do you achieve the effects when you hover the links at top(HOME,ABOUT , JOBS)
which you can see in http://www.webdesignerwall.com/ ,
can someone give me a hint ? or any?
A lot of people here are far too quick to whip out the scripting languages. Tsk, tsk. This is achievable through CSS. I'd even be inclined to say that there is no need for additional mark-up. One could use a background image on the :hover state. Simple.
Each link (#nav li a) contains the nav item text plus an additional span which is set to "display:none" by default. The span also has a set of other styles relating to its position and background-image (which is the text that appears).
On #nav li a:hover the span becomes display:block, which makes it visible at the defined position. No scripting needed.
HTML
<ul id="nav">
<li>Home <span></span></li>
<li>About <span></span></li>
<li>Jobs <span></span></li>
</ul>
CSS:
#nav li a span{display:none}
#nav li a:hover span{display:block}
This is a completely stripped down version of course, you will need to add your own positioning and other styles as appropriate.
There are many, many ways this could be acheived. The simplest would be to have each navigation item change the above image to reflect its corresponding graphic.
<div class="hoverImages">
<img src="blank.jpg" style="display:none;" />
</div>
<ul>
<li class="home">Home</li>
<li class="about">About</li>
<li class="contact">Contact</li>
</ul>
-- jQuery
$("li.home").hover(
function () {
$(".hoverImages img").attr("src", "hoverHome.jpg").show();
},
function () {
$(".hoverImages img").hide();
}
);
The way it's achieved is by using an empty <span>.
It's positioned off screen by default and move into view on hover
Like so:
<ul>
<li>Link<span> </span></li>
<li>Link<span> </span></li>
<li>Link<span> </span></li>
</ul>
And the CSS:
ul li a {
display: relative;
}
ul li a span {
position: absolute;
top: -50px; /* or however much above the a you need it to be */
left: -1000em;
}
ul li a:hover span {
left: 0;
}
It is probably a script on the Home, About and Jobs links that makes a floating div tag visible on mouseover and invisible on mouseout.
Here is a simple code example achieving a similar effect:
<html>
<body>
<a onmouseover="document.getElementById('my-hidden-div').style.display='block'" onmouseout="document.getElementById('my-hidden-div').style.display='none'">Hover Over This</a>
<div style="display:none" id="my-hidden-div">and I appear.</div>
</body>
</html>
Using jQuery you would just do something like
$(#MenuId).hover(function() { // show hidden image},
function() { // hide hidden image});
by the fact that you can rollover the whole area when on rollover i would suggest that it is simply an alternative background that appears on rollover using css. the elements themselves might then be positioned absolutely within the navigation container.
In this particular instance, the developer placed a span tag inside the li elements that make up the menu. That span has (most notably) these properties:
height: 33px;
top: -26px;
left: this varies to position the spans properly
position: absolute;
After that, just some JavaScript to make the span appear/disappear.
A pure CSS solution is explained on Eric Meyer site: Pure CSS Popups 2.