I'm new to web development sorry. ok so i want to make html and css menu drop when you click on it. i google and all i could find was menus which expand when you hover over them.
basically i want something like this
so far i have tried this
CSS
.menu-item {
background: #fff;
width: 50px;
}
.menu-item ul {
background: #fff;
font-size: 13px;
line-height: 30px;
list-style-type: none;
overflow: hidden;
padding: 0px;
}
.menu-item ul {
background: #fff;
font-size: 13px;
line-height: 30px;
height: 0px;
list-style-type: none;
overflow: hidden;
padding: 0px;
}
.menu-item:focus ul {
height: 93px;
}
.menu-item h4 a {
display: block;
text-decoration: none;
width: 200px;
cursor: pointer;
}
HTML
<div class="menu-item">
<h4>▼</h4>
<ul>
<li>Settings</li>
<li>Log Out</li>
</ul>
</div>
i would also be very pleased if you guys can give me link to any tutorial which would help me make this menu.
You can use jQuery for making it simple. It is a JavaScript file which provides you ease for creating such menus with ease. One of them which is easy to use can be found here: http://patrickkunka.github.io/easydropdown/
Related
My CSS Dropdown menu by hover is only working after the user clicks on the option, right after the click the dropdown shows and when hovering its acts perfectly,
I can't figure why it is happen and how to make the hover not wait for a click,
heres the html code:
<li>
events
<div class="nav-content">
<div class="nav-sub">
<ul>
<li>
weddings
<div class="underline"></div>
</li>
<li>
parties
<div class="underline"></div>
</li>
<li>
birthdays
<div class="underline"></div>
</li>
</ul>
</div>
</div>
</li>
heres the related css:
.nav-item {
display: inline-block;
padding: 20px, 30px;
height: 0px;
width: 130px;
color: black;
text-decoration: none;
border-color: black;
line-height: 40px;
}
.nav-content{
position: absolute;
background-color: white;
border-color: black;
color: #000000; font-family: "Varela Round";
font-size: 15px;
line-height: 24px;
text-align: right;
list-style-type: none;
z-index: 99999;
display: none;
left: 1110px;
}
.nav-sub{
padding: 1px;
border: 1px solid #000000;
position: relative;
z-index: 10;
}
.nav-sub ul li:hover {
background-color: black;
}
.nav-sub ul li:hover > .nav-item{
color: white;
}
.nav-item:focus{
background-color:whitesmoke;
}
.nav-item:hover ~ .nav-content{
display: block;
}
.nav-content:hover{
display: block;
}
Generally, your code here is pretty solid for a drop-down nav menu. It also works, as is, on jsFiddle. If it is not showing up until you click, some of your other code (not posted) is interfering. You might have to post the rest of your code in order to get help figuring out what is causing that behavior.
Note:
You will notice that positioning will be a chore unless you make a couple of changes. This is because positioning absolutely with relation to the window generally causes nothing but trouble.
/* Makes absolute children relative to the container */
li {
position: relative;
}
.nav-content {
...
left: 0;
...
}
The fiddle shows the changes, simply because it was otherwise causing inaccessible demonstration.
A link on a "navbar" on my website can't be clicked for some reason and I can't seem to find the reason why. It is in the viewport(Here is the link to the website:https://codetheworld.000webhostapp.com/. The link on the website is supposed to be the "Learn to code" button). One interesting thing is that, once I open an inspect element window, it works. Here is the code snippet for just the navbar:
#first {
margin-top: 500px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
top: -1150px;
left: 100px;
z-index: 4;
}
li a {
width: 200px;
height: 50px;
font-size: 2em;
text-decoration: none;
color: white;
font-family: Georgia, serif;
padding: 10px;
border: 2px solid white;
border-radius: 7px;
text-align: center;
line-height: 30px;
}
li a:hover {
background-color: grey;
color: white;
text-decoration: none;
}
<ul id="first">
<li>Learn to code</li>
</ul>
You positioned your element outside of the viewport, so it can't be clicked.
Remove the margin-top & top positioning and everything will work:
#first {
background: black;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
left: 100px;
z-index: 4;
}
li a {
width: 200px;
height: 50px;
font-size: 2em;
text-decoration: none;
color: white;
font-family: Georgia, serif;
padding: 10px;
border: 2px solid white;
border-radius: 7px;
text-align: center;
line-height: 30px;
}
li a:hover {
background-color: grey;
color: white;
text-decoration: none;
}
<ul id="first">
<li>Learn to code</li>
</ul>
Well, you have a <div id="up2"> and it's right over your button. That's the reason why you can't click that button.
You could increase the top value of your div#up2 and edit/decrease the top values of the elements in the div#up2.
#Alessi 42 commented the correct solution, however Dekel was the one who posted it.
I did a fiddle and verified certainty: https: // jsfiddle.net / drpeck / tgeyfpd8 /
So learning from the experience I would say:
First test with and without CSS, and once you have determined that without CSS the element appears.
Start introducing CSS selectors and add/removing the different attributes
Once you find the attribute that is affected proceed to play with the values.
For my own sake, although not required, having the absolute path always helps me personally to avoid any unexpected misunderstanding (in other words to have clarity), even if the file is under the root directory. i.e:
Insted of this: href="tutorial.html" I would do href="./tutorial.html"
My site has a fixed top navigation bar, and a fixed LHS navigation bar. On the LHS navigation bar, there is a list of months, and a secondary popout menu listing contents for each month. You can see the site as it is now here: Site
The secondary popout menu's listings are fixed to the top. If you aren't hovering over a secondary menu item, it closes. Therefore, as the months go by, it will become impossible to navigate to some content via the secondary menu.
The solution is to change the secondary menu so that it is relative to its corresponding month, rather than be fixed to the top. This is where my knowledge falls short and I struggle to write the solution in CSS (not using JS).
Here is the content:
<div id="leftbar">
<ul id="leftbarlinks">
<li>November 2015
<ul id="secondarylinks">
<li>Content List</li>
</ul>
</li>
<li>October 2015
<ul id="secondarylinks">
<li>Content List</li>
<li>Shell Q3 2015</li>
</ul>
</li>
</ul>
</div>
Here is the CSS:
/* Formatting the LHS vertical navigation bar (main navigation bar) on all pages */
#leftbar { position: fixed; top: 0; left: 0; height: 100%; width: 170px; text-align: left; color: rgba(53,56,57,0.97); background-color: rgba(53,56,57,0.97); margin-top: 40px; }
#leftbarlinks { white-space: nowrap; }
#leftbarlinks li { font-family: 'HelveticaNeue-Light', sans-serif; font-size: 20px; color: #E6E6E6; text-decoration: none; margin-left: -35px; line-height: 2; padding: 0; }
#leftbarlinks li:hover { color: #E4433F; text-decoration: none; cursor: pointer; }
#secondarylinks a { font-family: 'HelveticaNeue-Light', sans-serif; font-size: 18px; color: #E6E6E6; text-decoration: none; line-height: 1.5; list-style-type:none; }
#secondarylinks a:hover { color: #E4433F; text-decoration: none; cursor: pointer; }
#leftbar ul li ul { position: absolute; display: none; float: left; margin-top: auto; }
#leftbar ul li:hover ul {left: 170px; top: 0; display: block; text-decoration: none; list-style-type: none; }
#leftbar ul li ul li { background-color: rgba(20,22,22,1); line-height: 1.5; }
Apologies if the coding order is slightly muddled, this is the first website I have created - I have mostly been picking things up as I go along.
Thanks in advance for all replies!
Add this property to your css inside this rule:
#leftbarlinks li
{
position: relative;
}
And also to prevent the submenu from disappearing while moving cursor towards them add this:
#leftbar ul li ul
{
margin-left: -5px;
}
Wondering if someone can tell me why my links are not working. I have tried directly using the file path but still no luck.
Im not sure whether it is the css or the html link. Code snippets below.
HTML
<div id="menu">
<ul>
<li class="active">Homepage</li>
<li>Classes</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</div>
CSS
#menu {
float: right;
width: 600px;
height: 99px;
}
#menu ul {
float: right;
margin: 0px;
padding: 70px 0px 0px 0px;
list-style: none;
line-height: normal;
}
#menu li {
float: left;
margin-left: 3em;
}
#menu a {
display: block;
letter-spacing: 2px;
text-decoration: none;
text-transform: uppercase;
font-family: 'Archivo Narrow', sans-serif;
font-size: 1.10em;
font-weight: 600;
color: #B6B6B6;
}
#menu .active a
{
color: #FFFFFF;
}
#menu a:hover {
text-decoration: underline;
}
Thankyou in advanced
Added a jsFiddle: http://jsfiddle.net/jSgPR/
Your links work fine, but the :before element is appearing on top of the links.
This bit of CSS is appearing over the top of the menu, and thus making the links not clickable:
#banner:before {
content: '';
width: 100%;
height: 100%;
display: block;
position: absolute;
/*background: url('images/gradient-bg.png') no-repeat right top;*/
background-size: 100% 100%;
top: 0px;
right: 0px;
}
You can fix this by adding the following to your CSS file
position:relative; z-index:10;
Add these to #menu and you'll be able to hover and click on the navigation links.
you have to have:
cooking.html
cookeryclasses.html
cookeryaboutus.html
in the same Folder as the php file your using if you use only Filenames and no Paths.
Check this fiddle. Everything will work. http://jsfiddle.net/jSgPR/1/
I've searched the web for an answer to my problem but I couldn't find any good solutions.
I am trying to create a drop down list that shows up when the mouse is hovering over an icon. That works, but when I try to select an option in the drop down list it just dissapears. I can't figure out how to make it stay when i move the pointer from the "icon div" to the "list div". A problem I found many people encountered was that the "list div" wasn't close enough to the "icon div" or menu. I cheched this by setting different backgrounds and from what I can tell they are even overlapping.
I'll give you the code:
.settings_list {
height: 25px;
width: 39px;
position: fixed; top: 26px; right: 7px;
float: right;
display: block;
background: transparent url('resources/img/icons/list.png') center top no-repeat;
}
.settings_list:hover {
background-image: url('resources/img/icons/list_light.png');
}
.settings_list_sub {
display: none;
position: relative;
padding: 10px;
left: 40px;
width: 150px;
background-color: green;
color: #999;
opacity: 0.70;
}
.settings_list:hover + .settings_list_sub {
display: block;
}
.settings_list_sub li {
list-style: none;
margin-top: -5px;
background-color: yellow;
}
.settings_list_sub li a {
text-decoration: none;
display: block;
color: #999;
width: 135px;
padding: 5px 5px 5px 10px;
background-color: blue;
}
.settings_list_sub li a:hover {
text-decoration: none;
color: #FCFCFC;
background-color: #06C;
}
And the HTML:
<div class="settings_list"></div>
<div class="settings_list_sub">
<li>Test01</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Log out</li>
</div>
Maybe I'm doing this completely wrong. If you could help me I would be very grateful!
I actually have one more question. Is it possible to make my icon clickable (to open the drop-down list) without using JS?
Thank you in advance!
You should add:
.settings_list_sub:hover{
display:block;
}
to your code and it works :)