I am working on a CSS-only dropdown menu. This is the code I am using now:
.show
{ display: none;
}
.hide:focus + .show
{display: block;
}
.hide:focus
{display: none;
}
#ddm
{display: none;
}
.hide:focus ~ #ddm
{display: block;
}
<body>
menumenu
<div id="ddm">items</div>
</body>
It works heartily in all browsers except Microsoft Edge. That browser only shows the menu for a fraction of a second. :( Does anyone possibly know what is happening here? And how I can fix this? I appreciate all the help. Thank you very much!
Kind regards,
George.
Updated Answer: As per comments, without using JavaScript or a checkbox technique and using the :focus pseudo class, you could wrap the menus in a button and use that as the initial focus trigger.
/* Menu styling for demo, change as needed */
#menu {
cursor: pointer;
padding: 0px;
border: 0;
background: none;
}
/* Hidden initially */
#ddm,
#hide {
display: none;
}
/* Prevent the 'show' element from triggering focus */
#show {
pointer-events: none;
}
/* Show elements as needed */
#menu:focus~#ddm,
#menu:focus #hide,
#menu:not(:focus) #show,
#hide:focus #show {
display: block;
}
/* Hide elements as needed */
#menu:focus #show,
#menu:not(:focus)~#hide,
#hide:focus #hide {
display: none;
}
<body>
<!-- New button element to wrap around the two menus -->
<button id="menu">
<!-- Numbers in text added just to demonstrate the difference -->
menu1
menu2
</button>
<div id="ddm">items</div>
</body>
Original Answer: Perhaps a simpler approach would fit your needs (unless you have a specific reason to use two menus that are hidden and shown). Just have one menu that is always shown, and toggle the items depending on its focus:
#ddm {
display: none;
}
.menu:focus~#ddm {
display: block;
}
<body>
menu
<div id="ddm">items</div>
</body>
I would still be using javascript or the checkbox method as they are more robust, but the following could work.
Use some creative positioning and the :target pseudo class, which selects the element referenced by href=#someId and then sibling selectors. Then the id for the burger menu is added to the show link href which is also better semantics. The hide/show buttons will need to be added after the menu element then repositioned with position:absolute.
/*Position everything relative to nav*/
nav {
position: relative;
padding-top: 1.25em;
}
/*Position our show/hide elements*/
.show,.hide {
position: absolute;
top: 0;
}
/*Hide burger and button */
#ddm, #ddm:not(:target) ~ .hide {
display: none;
}
/*Show Burger when show clicked*/
#ddm:target {
display: block;
}
/*HIde Burger when not show clicked*/
#ddm:target~.show {
display: none;
}
<body>
<!-- Nav Used For Positioning -->
<nav>
<div id="ddm">Burger</div>
Show Burger
Hide Burger
</nav>
</body>
Related
I am doing a school project in which I'm not allowed to use Javascript or Bootstrap, and I cannot find a way to make a dropdown menu when the site is opened in smaller screens. Most guides and videos show using Bootstrap or JS and it has gotten me all confused, is it possible to do with just HTML and CSS?. Can anyone give me some quick tips or alternatives? Thank you beforehand!
Answer below using HTML and CSS only.
If my answer works, please check it as final answer and upvote it so other people with same problem will get help too. Cheers
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<style>
/* Style The Dropdown Button */
.dropbtn {
cursor: pointer;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px;
text-decoration: none;
display: block;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
</style>
I'm following this tutorial on how to create a CSS dropdown menu. Currently the method stated does not use any JavaScript (only HTML and CSS). Here is the method suggested, excluding the color/background color/font/etc.
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
}
.dropdown-content a {
display: block;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
As you can see, the Dropdown button appears, and when one hovers over it, the list items are shown. The only styling applied when an element is hovered over is
.dropdown:hover .dropdown-content {
display: block;
}
How does this work? (the w3schools tutorial did not describe the reasoning behind the display styling)
When I ran the above snippet, I was expecting the list items to be shown inline and then, when the button is hovered over, to be shown as a block under the button (thus I was expecting the list items to never be hidden). What is making these list items hidden by default?
Furthermore, if I am applying the display: block styling on the div element (the one with the class dropdown), then how come when I hover over the empty space still physically under the button, however to the right of the list text, the display: block styling is undone (and the list items vanish)? I would expect the div element to take up an area in the shape of a rectangle (where even hovering over the white part of the rectangle would trigger :hover). *
* I may need to clarify this entire part of my question, please say so if I need to.
The .dropdown-content is hidden by default:
.dropdown-content {
display: none;
}
The later rule overrides that and shows the content when the pointer hovers over the parent .dropdown:
.dropdown:hover .dropdown-content {
display: block;
}
This rule applies to any .dropdown-content within a .dropdown that is in the hover state.
To answer the second question, it's because of the position: absolute that the white-space next to the child items don't maintain the hover state. See the snippet below, which includes outlines to show the boundaries of each element. As long as the pointer is within the blue (parent) box or the red (child) box, the hover state is maintained.
.dropdown {
position: relative;
display: inline-block;
outline: solid 1px blue;
}
.dropdown-content {
display: none;
position: absolute;
outline: solid 1px red;
}
.dropdown-content a {
display: block;
background: yellow;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
Here is the entire code for my menu. I'm not posting it here again for clarity.
Some code explanation:
id="onlink" means the link is clicked. The page is active.
What I want is when MENU is onlink, its entire submenu (here both: submenu and submenu2) should become visible too (note we have not clicked any particular submenu).
Is it possible to establish such dependency in pure css?
So far the submenu only pops up on menu hover and disappears after it.
I think you are looking to get the submenus to be hovered as well even after the MENU is not ONLINK. Here is a solution. Hope this is what you are looking for. I used the opacity css property.
#menu li ul.sub-menu {
opacity: 0;
position:absolute;
}
#menu li ul.sub-menu a {
border: none;
background: none;
display: block;
}
#menu li:hover .sub-menu {
opacity:1;
width: 150px;
text-align: center;
}
here is a fiddle http://jsfiddle.net/Y8pnm/2/
Just expand your selector to include every .sub-menu which is after #onlink using the General sibling selector (~).
#menu li:hover .sub-menu,
#menu #onlink ~ .sub-menu {
display:block;
width: 150px;
text-align: center;
}
jsFiddle Demo
You could make MENU and it's submenu share the same class and then use
.class:hover {
// Your CSS code
}
I have a list of items of which only the first is visible and on list hover shows all items with side effect of changing the position of surrounding content. How to evade this unwanted effect?
Here is an example list:
http://jsfiddle.net/dsbonev/z8Sjy/
All examples that I checked for styling menus have a two-level structure (parent -> children). On parent hover children are shown. But I don't have a parent to hover onto nor I want to promote one of the children as a parent by moving it out of the list and thus breaking the semantic of the markup.
Figured it out! This is what I wanted:
http://jsfiddle.net/z8Sjy/
I accept comments with shortcomings or improvements of this method.
HTML
<div class="list-wrapper">
<ul class="items">
<li>stackoverflow</li>
<li>superuser</li>
<li>serverfault</li>
</ul>
</div>
CSS
.list-wrapper, .items {
display: inline-block;
}
.list-wrapper {
position: relative;
background-color: blue;
height: 1em;
}
.items {
position: absolute;
background-color: red;
}
.items > li:not(:first-child) {
display: none;
}
.items:hover > li:not(:first-child) {
display: block;
}
You could position the list absolutely and then add padding to the paragraph to compensate.
http://jsfiddle.net/z8Sjy/2/
Instead of using display: none & display: block use visibility: hidden & visibility: visible. That way they take up the space in the HTML document, but are not shown:
Working example: http://jsfiddle.net/z8Sjy/3/
Edit
The following CSS would be more cross-browser compatable for showing / hiding "not first-child" elements as the selector :not is actually CSS3.
.items > li:first-child ~ li {
display: none;
}
.items:hover > li:first-child ~ li {
display: block;
}
I am new to web programming. I want to create buttons in html and when you hover over it, it shows a drop down of options for pages you want to go to.
Any help is appreciated. Thanks!
Here's a very basic example of what you're trying to achieve. It's actually not a button, but a styled list. Since you're new to HTML, I'll post the entire code, so that you can copy and paste it:
#button {
/* Box in the button */
display: block;
width: 190px;
}
#button a {
text-decoration: none;
/* Remove the underline from the links. */
}
#button ul {
list-style-type: none;
/* Remove the bullets from the list */
}
#button .top {
background-color: #DDD;
/* The button background */
}
#button ul li.item {
display: none;
/* By default, do not display the items (which contains the links) */
}
#button ul:hover .item {
/* When the user hovers over the button (or any of the links) */
display: block;
border: 1px solid black;
background-color: #EDC;
}
<body>
<div id="button">
<ul>
<li class="top">OtherOverflow Sites</li>
<li class="item">Visit serverfault</li>
<li class="item">Visit superuser</li>
<li class="item">Visit doctype</li>
</ul>
</div>
</body>
Sounds like you're looking for some simple CSS-based dropdowns - I recommend what's called a "Suckerfish" style dropdown. This link uses several items for a horizontal menu, but it can easily be adapted to one link.
http://htmldog.com/articles/suckerfish/dropdowns/