I've stumbled upon a problem here. I created a menubar which consists several clickable parallelogram menu-items with list and link tags.
Unfortunately, the menubar is showing a problem now. Whenever I try to hover the overlapping part of menu-item, it will automatically choose the next-right menu-item. For example, when I tried to click the pointy part of HOME (which is overlapping with menu-item ABOUT), the menu-item ABOUT would be chosen instead.
I want all of area of each menu-item clickable respectively without any interference from neighboring menu-items. Any helps and suggestions please?
http://i.stack.imgur.com/NDKNF.png
http://i.stack.imgur.com/gnhzt.png
Here's the HTML code:
<ul class="header" id="navlist">
<li id="home"></li>
<li id="about"></li>
<li id="benchmark"></li>
<li id="service"></li>
<li id="work"></li>
<li id="client"></li>
<li id="contact"></li>
</ul>
Here's the CSS:
#navlist {
position:relative;
}
#navlist li {
margin:0;padding:0;list-style:none;position:absolute;top:0;
}
#navlist li,
#navlist a {
height:31px;display:block;
}
#home {
left:0px;
width:112px;
background:URL('../headbar/navmap.png') 0px 0px;
}
#home a:hover {
background:URL('../headbar/navmap.png') 0px -31px;
}
and for another menu-item such as about, client, and others follow the same rule as home.
Related
I'm wondering what some good practices are for styling li elements like buttons. Any examples would be appreciated. I'm guessing a box shadow and a background color would go a long way, but that alone does not seem to be enough.
Edited the question to make it more useful.
Okay I think what your after is to make the whole link clickable rather than just the text. All you need to do is make your anchor a block element, then it will take the full width of the li:
.nav a {
display:block;
}
<ul class="nav">
<li>Home</li>
<li>About us</li>
</ul>
I assume you try to make menu and want bigger buttons than just link text.
You should set links inside list elements as you shown and then make links as buttons.
Very simple css example for horizontal menu would be something like this:
.nav li {
list-style-type: none;
padding 0px;
margin 0px;
float: left;
}
.nav li a {
text-decoration: none;
display: block;
padding: 0px 15px;
line-height: 25px;
}
For horizontal menu you should make width with padding and height with line-height. Unless you want every button to be same sized, then you just could use width.
More in-depth example would be this one http://medialoot.com/blog/how-to-create-a-responsive-navigation-menu-using-only-css/
I think your issue may be that you have styled the <li> to look like the menu button, but the text is the only part that is clickable, is this correct?
What you need to do, is not style the <li> as the menu button but instead the <a> within it.
Here is a demo: https://jsfiddle.net/arrx7dL7/
As you can see the styles are applied to the links, rather than the li
HTML:
<ul class="menu">
<li><a class="menu-item" href="#">Item 1</a></li>
<li><a class="menu-item" href="#">Item 2</a></li>
<li><a class="menu-item" href="#">Item 3</a></li>
<li><a class="menu-item" href="#">Item 4</a></li>
</ul>
CSS:
.menu {
list-style:none;
}
.menu-item {
color:black;
text-decoration: none;
background: #eee;
border: 1px solid #ccc;
padding:20px 30px;
display:block;
}
I think this is what you mean, if so I hope it is helpful.
I ran into a problem trying to build a dropdown menu in a navbar, using nested lists.
Here's a snippet of the code :
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
}
.dropdown:hover + .dropdown-content {
display: block;
}
.dropdown-content a {
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
<nav class="navbar navbar-default" role="navigation" data-600='opacity:0' data-1000='opacity:1'>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul id=navbar class="nav navbar-nav">
<li class="dropdown"><a href=index.html>Jeux de vilains ▼</a></li>
<div class="dropdown-content">
<ul class="nav navbar-nav navbar-right">
<li class=secondary><a href=/carto2016-jeuxvideos/article-1.html>Tomb Raider</a></li>
<li class=secondary><a href=/carto2016-jeuxvideos/article-2.html>GTA</a></li>
<li class=secondary><a href=/carto2016-jeuxvideos/article-3.html>SimCity</a></li>
<li class=secondary><a href=/carto2016-jeuxvideos/article-4.html>Call of Duty</a></li>
<li class=secondary><a href=/carto2016-jeuxvideos/article-5.html>Resident Evil 5</a></li>
<li class=secondary><a href=/carto2016-jeuxvideos/article-6.html>Civilization</a></li>
</ul>
</div>
</ul>
</div>
This part was solved :
Basically, my problem is that I want my "dropdown" div to have no
style of its own, but to inherit the style of the navbar.
The weird thing is that the nested navbar is properly styled, but the
dropdown div follows the style of general a and hover:a elements.
If you look at the beginning of my HTML, you'll see the culprit: <div
class="dropdown">, which appears completely differently from the
rest. I don't understand why the class in which it is nested (the nav
class) is not considered the parent, especially since the following
list is properly styled.
I attached a screenshot of what it looks like: "Jeux de vilains"
looks weird, when it should look like "Règles du jeu".
This has been solved too
Well thank you all for you swift and kind help, I took out the
unwanted div and put the dropdown class in the corresponding li.
However, while the list does appear on hover, it disappears as soon as
the mouse is not hovered. I'd like to make it so the secondary menu
appears as long as either the parent li or the secondary menu itself
are hovered. How could I do that ?
Here's the website :
http://medialab.github.io/carto2016-jeuxvideos/index.html
Thanks in advance for everyone's help.
Question solved.
Your first instinct would be to use JavaScript but for this but there's a slick way to accomplish this with what are essentially operators in CSS...
Use the :hover pseudo-class on a parent element and look for the instance of the dropdown.
.nav:hover .dropdown-content {
display: block;
}
Because you're selecting the parent element, it applies to both the dropdown and what you hover over to show it over so it's displayed whenever it's within those realms. Make more and they'll work just the same respective to their individual dropdowns.
https://jsfiddle.net/ksxk33w4/1/
I have the following code: https://jsfiddle.net/u8db2j75/1/ and it works fine, I have the effect I wanted - a picture and some text next to it. But now I want to add another component, a navigation bar - and I want to add it on top of the page. So what I followed the example given here http://css-snippets.com/simple-horizontal-navigation/ and I created the code like this:
<div class="nav">
<ul>
<li class="home">Home</li>
<li class="tutorials"><a class="active" href="#">Tutorials</a></li>
<li class="about">About</li>
<li class="news">Newsletter</li>
<li class="contact">Contact</li>
</ul>
</div>
https://jsfiddle.net/u8db2j75/2/ however, after modifying css as well -as you can see - the effect is far from what I expected... What did go wrong here?
Give your .nav ul and .nav a min-width of 100%.
Example:
.nav {
min-width:100% !important;
}
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
position: absolute;
top: 0;
padding: 0;
margin: 0;
min-width: 100%;
}
https://jsfiddle.net/u8db2j75/4/
I don't have 50 reputation to comment the answer above, but:
List item needs to be displayed inline, or floated to the left so the result will be a horizontal navigation as per the examble shown in the issue.
I have made a horizontal navigation bar using styles, but I've encountered a major issue... Since <li> is a block element, I can't align it using text-align:right, which makes me unable to align it properly. I've tried using the display:inline; syntax for the list-item element, but that doesn't make any difference either (which makes sense actually).
My question being, is there any way of aligning horizontal <li>, without having to use float:right;? I want it to fit the current list's format (which I've adjusted to fit a parent div), and using float isn't really a good or safe method. Here's a screenshot of what I got so far (layout is slightly messed up due to recent addition of image). As you can see, I have managed to get the "My page" and "Log out" properly placed, but as soon as I add something more "complex" (like the "+", which now is placed in the normal list), it gets screwed up... I really don't get how other websites manages to get this right.
You must define text-align: right for the containing element
HTML:
<ul class="nav">
<li class="menu">1</li>
<li class="menu">2</li>
<li class="menu">3</li>
<li class="menu">4</li>
<li class="menu">5</li>
</ul>
CSS:
.nav {
text-align: right;
}
.menu {
display: inline;
}
JSFiddle
You can split the menu to a left and right part, if you like. Add or remove padding and margin as needed
HTML:
<ul class="nav left-nav">
<li class="menu">1</li>
<li class="menu">2</li>
<li class="menu">3</li>
</ul>
<ul class="nav right-nav">
<li class="menu">4</li>
<li class="menu">5</li>
</ul>
CSS:
.nav {
margin: 0;
padding: 0;
}
.left-nav {
text-align: left;
}
.right-nav {
text-align: right;
}
.menu {
display: inline;
}
JSFiddle
Here you go i think this is what you are looking for:
jsfiddle.net/Sdw5h/
On this website, the menu has the following structure:
<ul>
<li class="page_item page-item-2 current_page_item">
Home
</li>
<li class="page_item page-item-7">
Features
</li>
<li class="page_item page-item-18">
News & Reviews
</li>
<li class="page_item page-item-20">
Contact
</li>
</ul>
The current_page_item class changes the background of the currently selected menu item to black via the following rule:
.mainnav li.current_page_item a {
background: url("images/bg_nav_hover.png") no-repeat scroll right center transparent;
}
This works for the Home menu item, but for all others a small gap is left on the left-hand side of the selected menu item, highlighted by the yellow circle in the image below
I can't seem to figure out why this problem occurs for all menu items except Home.
Your <li> tags are display: inline-block; and there are spaces between the tags.
Because your <li> tags are inline-block, they respect whitespace in the HTML, just like inline elements and text.
In the end, the background image is covering the background of the element correctly. Your best option to get rid of the spacing is to remove all whitespace between </li> and the next <li> tags.
As mentioned by #ajp15243 below, you can omit the closing tag, or use some wacky tricks to get the HTML to swallow up the whitespace.
You should use display:table-cell for .mainnav_wrapper .mainnav ul li class.
then add a padding to center the menu items to your ul element:
.mainnav_wrapper ul {
padding-left:192px;//this is especially for this project
margin: 0 auto;
overflow: hidden;
padding: 0;
text-align: center;
width: 960px;
}
and you are ready to go...