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/
Related
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>
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 trying to make a drop down menu but the hover is not producing the desired display effect. I just want the drop down menu to display when the mouse hovers over the list element. I'm new to HTML and CSS, so I can't pinpoint my error.
The relevant HTML:
#strip{
width: 950px;
height: 28px;
background-color: #2c276d;
font-size: 10pt;
}
.strip{
margin:0;
padding: 0;
}
.strip li{
list-style-type: none;
float: left;
}
.strip li a {
color: white;
text-decoration: none;
display: block;
text-align: center;
width:140px;
height:23px;
padding-top:5px;
border-right: 1px solid #FFFFFF;
}
.strip li.shrt a{
width: 145px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropcmpy {
display: none;
position: absolute;
background-color: #2c276d;
font-size: 10pt;
width: 145px;
}
.dropcmpy a {
color: white;
display: block;
text-decoration: none;
padding: 5px;
border-top: 1px solid #FFFFFF;
}
.strip li a:hover{
background-color: #28A2D5;
}
li.shrt:hover .dropcmpy {
display: block;
}
<div id="main">
<div id="strip">
<ul class="strip">
<li class="shrt">Com</li>
</ul>
</div>
<div class="dropcmpy">
Key
Ad
Fac
Car
FAQ
</div>
</div>
No matter how I format that last piece of CSS, it doesn't produce a drop down menu, unless I do
#main:hover .dropcmpy {
display: block;
}
or give the first div a class, and then use that. Otherwise the dropdown menu will not appear. This presents the issue that the entire strip will then produce the menu, while I want only the shrt to.
As john stated, selector .class1 .class2 is targeting an element with class="class2" that is a child of an element with class="class1".
which means you need to put the dropdown menu INSIDE the element, thats supposed to show the dropdown when hovered.
Usuall way is using another list inside the button, for example
<div id="main">
<div id="strip">
<ul class="strip">
<li class="shrt">
Com
<ul class="dropcmpy">
<li>Key</li>
<li>Ad</li>
<li>Fac</li>
<li>Car</li>
<li>FAQ</li>
</ul>
</li>
</ul>
</div>
</div>
and css
.dropcmpy {display: none;}
.shrt:hover .dropcmpy {display: block;}
That should do it, hope it was helpful :).
In order to show an object on hover with css, that object must be the sibling or child of the thing being hovered (As there are no parent selectors). This is not the case in your code.
So you have a few options:
Make div.dropcmpy a child of li.shrt. (As in Teuta Koraqi's answer)
Hack. Use an empty pseudo element (.dropcmpy::before) and absolutely position it over li.shrt, then use that as the hover element.
Use javascript
I don't know what the structure of your page is so can't say which of these would be best for you. The first is certainly the cleanest if you can manage it.
The problem is with inheritance. The last block that you are trying to use is looking for a .dropcmpy element that is a child of .shrt (which obviously doesn't exist). The reason the alternative works is because .dropcmpy is a child of #main.
I don't see any issue with using #main as the hover listener, since everything related to the dropdown is contained in it anyways.
After a reminder from #JohnCH, I realized you could do a sibling selector like this to get the functionality I think you want.
#strip:hover+.dropcmpy {
display: block;
}
so im building a webpage currently, and as a request every menu has to have a different color. but im having a but of a struggle figuring out how i target the individual list item.
heres the structure:
<nav>
<ul>
<li>red</li>
<li>blue</li>
<li>orange</li>
<li>yellow</li>
<li>green</li>
</ul>
</nav>
the items have some padding and borderradius but i can't figure out how i give the different items a different backgroundcolor the easiest way.
Please help me ;)
thanks in advance.
If it is fixed then you can achieve like below using nth-child selector.
ul.test li:nth-child(1)
{
background:red;
}
ul.test li:nth-child(2)
{
background:blue;
}
ul.test li:nth-child(3)
{
background:orange;
}
ul.test li:nth-child(4)
{
background:yellow;
}
ul.test li:nth-child(5)
{
background:green;
}
DEMO
I think a better solution may be to avoid having a <ul> in the <nav>, then style anchor links directly. You avoid having styles for the link items sprawled over multiple style selectors (ul, li, a), and the markup is much cleaner.
<nav>
Home
About
Contact
Whatever
</nav>
The CSS is also short, semantic and easy to understand without guessing:
nav > a {
display: inline-block; /* or block, depending on design */
vertical-align: top;
padding: 20px; /* here rather than in <li> */
margin: 10px; /* here rather than in <li> */
border-radius: 5px; /* here rather than in <li> */
color: white;
text-decoration: none; /* remove default underline */
}
nav > a[href="home.html"] {
background-color: red;
}
nav > a[href="about.html"] {
background-color: green;
}
nav > a[href="contact.html"] {
background-color: blue;
}
nav > a[href="whatever.html"] {
background-color: violet;
}
Personally, I think this is better than using nth-child, especially if you add nav items in between other nav items later on. Although nth-child works, it is not entirely clear which background is being controlled for which link.
To style the nth item, use the following CSS:
li:nth-child(2) {
background-color: #f00; /* Whatever you want */
}
Have a look at CSS Selector Reference The :nth-of-type(n) and :nth-child(n) part
I have an image 78x26 px that i want to use as buttons for my navigation bar.
What would be the most suitable way of doing this?
I want the image to keep its original size at the moment it doesnt
#navbar li {
background-image:url("../images/btns.png");
}
Im aware that i can do something like this but then again how do i place the text over the images
<li><img src="images/btns.png"></li>
You must also specify your width and height of the <li>. Please try this:
#navbar li {
background-image:url("../images/btns.png");
width: 78px;
height:26px;
}
<li> elements, I believe, are inline and therefore you must do something like this to make them appear side by side:
#navbar li {
background-image:url("../images/btns.png");
width: 78px;
height:26px;
float: left;
}
background-image alone does not scale the image. If you feel like it's not rendering at the original size, it's probably because it's repeating.
use this instead:
background:url("../images/btns.png") no-repeat;
And then
<li>Your text here</li>
You might now need to resize the li to fit your design
It could be better if you load your code online, like on codepen.io
I believe this to be the standards ways:
<nav class="navbar" role="navigation">
<ul class="main-nav">
<li class="menu-1">Menu-Link-text</li>
<li class="menu-2">Menu-Link-text</li>
....
</li>
</ul>
</nav>
.navbar {
overflow:hidden /* trick to force the navbar to wrap the floated <li>s */
}
.main-nav li {
float: left;
display: inline; /* bug fix for older IE */
}
.main-nav a {
display:block; /* bigger click area */
width: 78px;
height:26px;
text-indent: 100%; /* Text in the link for search engines and assistive technologies */
whitespace: nowrap; /* see above */
background: #yourFallBackBackgroundColor url("../images/btns.png") no-repeat 0 0; /* use a sprite with all images in one file and move them within background as required */
}
.menu-1 {
background-position:0 0;
}
.menu-2 {
background-position:-78px 0;
}
.menu-3 {
background-position:-156px 0;
}