I am trying to get my bullet-point.png images to show up on the right side of each of my navigation/li menu options.
I did it with some in-valid HTML5, but would prefer to do it properly. Here is my screenshot from before so it explains what I am after. (I previously just added in multiple strings on each menu item). I think it's better to have each menu item assigned to a class with a background-image defined instead.
The HTML/CSS below displays the navigation like the screenshot but without any of the bullet-point images. Any idea why?
HTML
<nav class="nav">
<div class="span12">
<ul>
<li class="bullet-point">HOME</li>
<li class="bullet-point">PROJECTS</li>
<li class="bullet-point">CASE STUDIES</li>
<li class="bullet-point">PROFILE</li>
<li class="bullet-point">NEWS & EVENTS</li>
<li class="bullet-point">LOCATION</li>
<li class="bullet-point">CONTACT</li>
</ul>
</div>
</nav>
CSS
.bullet-point {
margin-top: -5px;
margin-right: 10px;
background: url('img/bullet-point.png');
}
Fiddle: http://jsfiddle.net/avinvarghese/eemTZ/
Css:
.bullet-point {
margin-top: -5px;
margin-right: 10px;
list-style:none;
float:left;
}
.bullet-point:after {
content:" • ";
}
.bullet-point:last-child:after {
content: "";
}
It should be
ul {
list-style-image: url('img/bullet-point.png');
}
Background images do not apply here.
Related
I'm building a css dropdown menu and have been unable to get the submenus to appear below their respective parent li elements. I've tried a bunch of the solutions suggested in response to similar questions but have been unable to get them to work.
Here's a sample of the menu I'm building:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Menu Test</title>
<link rel="stylesheet" href="menustyle.css" type="text/css">
</head>
<body>
<div id="menudiv">
<ul class="menu">
<li class="menuitem">Aluminum</li>
<ul class="submenu">
<li class="subitem">Round</li>
<li class="subitem">Sheet</li>
<li class="subitem">Plate</li>
</ul>
</li>
<li class="menuitem">Copper</li>
<ul class="submenu">
<li class="subitem">Round</li>
<li class="subitem">Sheet</li>
</ul>
<li class="menuitem">Steel</li>
</ul>
</div>
</body>
</html>
And here's the css:
#menudiv {
text-align:center;
}
ul.menu {
list-style-type:none;
}
li.menuitem {
position:relative;
display:inline-block;
}
ul.submenu {
display:none;
position:absolute;
}
.menuitem:hover+ul.submenu {
display:block;
}
I can move the submenus around by adding things like right:50px; to ul.submenu, but that moves all the submenus to the same location.
What am I missing here? Thanks!!
Here's a Fiddle.
First of all, the following markup structure :
<li class="menuitem">Aluminum</li>
<ul class="submenu">
<li class="subitem">Round</li>
<li class="subitem">Sheet</li>
<li class="subitem">Plate</li>
</ul>
is incorrect. It should be :
<li class="menuitem">Aluminum
<ul class="submenu">
<li class="subitem">Round</li>
<li class="subitem">Sheet</li>
<li class="subitem">Plate</li>
</ul>
</li>
Secondly, you could use a CSS reset for ul,li elements. For the sake of simplicity I've used :
* {
margin: 0;
padding: 0;
}
Now, coming to your question. the following classes needs to be changed :
.menuitem:hover+ul.submenu {
display:block;
}
to
.menuitem:hover > ul.submenu {
display:block;
}
and
ul.submenu {
display:none;
position:absolute;
top:0px;
right:50px;
}
to
ul.submenu {
display:none;
position:absolute;
}
You can then modify the following class (so that the child ul elements "fits-in" to the parent li):
li.menuitem {
position:relative;
display:inline-block;
}
to
li.menuitem {
position:relative;
display:inline-block;
padding: 5px 10px;
margin: 0 10px;
}
In summary, I guess this is what you are looking for :
* {
margin: 0;
padding: 0;
}
#menudiv {
text-align:center;
}
ul.menu {
display: inline-block;
list-style-type:none;
}
li.menuitem {
position:relative;
display:inline-block;
padding: 5px 10px;
margin: 0 10px;
}
ul.submenu {
display:none;
position:absolute;
}
.menuitem:hover > ul.submenu {
display:block;
}
<body>
<div id="menudiv">
<ul class="menu">
<li class="menuitem">Aluminum
<ul class="submenu">
<li class="subitem">Round</li>
<li class="subitem">Sheet</li>
<li class="subitem">Plate</li>
</ul>
</li>
<li class="menuitem">Copper
<ul class="submenu">
<li class="subitem">Round 2</li>
<li class="subitem">Sheet 2</li>
</ul>
<li class="menuitem">Steel</li>
</ul>
</div>
</body>
Hope this helps!!!
Try placing the <ul class="submenu"> inside the <li class="menuitem">. Then set the <li> to position:relative; and set the <ul> to position:absolute;left:0;. This will position the <ul> relative to its parent element, the <li>.
Here's a codepen example: http://codepen.io/anon/pen/WQdMjX
Your markup is incorrect for nesting a sub-list.
You're doing this:
<ul>
<li>text</li><!-- incorrect, don't close li here -->
<ul>
<li>sub</li>
</ul>
</li><!-- correct, though li is already closed -->
<li>text</li><!-- incorrect, don't close li here -->
<ul>
<li>sub</li>
</ul>
<!-- needs closing li here -->
<li>text</li>
</ul>
Instead do this:
<ul>
<li>text
<ul>
<li>sub</li>
</ul>
</li>
</ul>
Then update your CSS selector from .menuitem:hover + ul.submenu to .menuitem:hover > ul.submenu as you're no longer selecting a sibling element (+) but a child element (>).
You'll need to fine tune the positioning of your sub-menus from here but this should get you where you need to be.
Remember, when you are developing menus you need to make sure the link content is inside anchor tags, including the links at the top level navigation that launch the subnav. That way these links are natively focusable. You want to be able to reach these menu elements with a keyboard only since many with arthritis, Parkinson's disease, etc. may be unable to use a mouse (and you won't want to use tabindex to mimic this behaviour since screen-readers will look for anchor tags.)
There was a similar StackOverflow question yesterday: Absolutely positioned child's top edge pinned to the bottom edge of its parent that has unknown height?
You can also Bootstrap Dropdown CSS in a normal case too.
I created a JSFIDDLE: http://jsfiddle.net/Qw2Q7
HTML:
<ul id="tabs">
<li class="active">By Name</li>
<li>By Specialty</li>
<li>By Location</li>
</ul>
What I am looking to do is add an image on the left of the text of each tab, something like this:
How can I accomplish adding the icon to each tab like pictured above?
UPDATE:
Use Css list-style-image Property.
HTML
<ul id="tabs">
<li class="active person">By Name</li>
<li class="book">By Specialty</li>
<li class="target">By Location</li>
</ul>
then CSS
ul#tabs li.person {
list-style-image: url('images/person.png');
}
ul#tabs li.book {
list-style-image: url('images/book.png');
}
ul#tabs li.target {
list-style-image: url('images/target.png');
}
UPDATE:
Instead of the above way, which might take a little more altering you could just change the background of the li and the using background-position property:
HTML
<ul id="tabs">
<li class="active person">By Name</li>
<li class="book">By Specialty</li>
<li class="target">By Location</li>
</ul>
then CSS
ul#tabs li.person {
background: #3C75C3 url('images/person.png') no-repeat;
background-position: 7px center;
}
ul#tabs li.book {
background: #3C75C3 url('images/person.png') no-repeat;
background-position: 7px center;
}
ul#tabs li.target {
background: #3C75C3 url('images/person.png') no-repeat;
background-position: 7px center;
}
EXAMPLE:
http://jsfiddle.net/Qw2Q7/57/
Just use an img tag like so:
<li class="active"><img src="whatever.png" />By Name</li>
You can define an id for each li, for example:
<li id="icon-name" class="active">By Name</li>
and then to define it a background (the icon) in your css, like:
#icon-name {
background: url('_IMAGE_PATH_') 10px center no-repeat;
padding-left: 20px;
}
I included padding so the text starts after the icon, and doesn't appear above it / cover it.
"10px" - how far you want it from the left edge
"center" - to have the icon/image in the middle of your li
Since it's a background, you need also to prevent it from repeating, by "no repeat"
_IMAGE_PATH_ should be changed to the actual path of the image.
you can use :before pseudo element to put the icon in every list item.
for example check the CSS below and the Demo. and now update Demo
li:before
{
content: "";
position:absolute;
content:url('http://lorempixel.com/20/20');
left:0;
height:20px;
width:20px;
}
li:before :hover
{
content: "";
position:absolute;
content:url('http://lorempixel.com/20/20');
left:0;
height:20px;
width:20px;
}
if you need separate icons then you have to add the class in each li. For example I've added class .place.
li.place:before
{
content: "";
position:absolute;
content:url('http://placehold.it/20/20');
left:0;
height:20px;
width:20px;
}
<ul id="tabs">
<li class="active">
<table cellspacing=1 cellpadding=1 style=''>
<tr><td><img src='source'></td><td>By Name</td></tr></table></li>
<li>By Specialty</li>
<li>By Location</li>
</ul>
The following is a screen capture of the issue that i'm faced with. The drop down menu is supposed to appear under the second menu item in the top menu.
The HTML is,
<nav class="nav">
<ul>
<li class="menu-item">Hi Alexander!</li>
<li class="menu-item"><a>My Account</a>
<div class="my-sub-menu">
<ul class="sub-list">
<li class="list-item"><a>History</a></li>
<li class="list-item"><a>Personal Details</a></li>
<li class="list-item"><a>Preferences</a></li>
<li class="list-item"><a>Bonuses</a></li>
<li class="list-item"><a>Wishlist</a></li>
<li class="list-item"><a>Newsletter</a></li>
<li class="list-item"><a>Invite Friends</a></li>
<li class="list-item"><a>FAQ</a></li>
<li class="list-item"><a>Sign out</a></li>
</ul>
</div>
</li>
<li class="menu-item"><a>Contact Us</a></li>
<li class="menu-item"><a>Chat</a></li>
<li class="menu-item"><a>Chat</a></li>
</ul>
</nav>
The CSS is as follows,
.nav {
margin-top: 2px;
position: relative;
float: right;
}
.nav > ul {
padding: 0;
margin: 0;
}
.menu-item{
list-style: none;
float: left;
}
.menu-item .my-sub-menu {
visibility: hidden;
position: absolute;
padding: 0;
margin: 0;
}
.menu-item:hover .my-sub-menu {
visibility: visible;
}
.list-item {
list-style: none;
}
I need the sub menu to appear under the second item in the top menu. This is only in firefox and IE but chrome renders it perfectly. I cant figure out what the issue is. Is there at least e fix that i could use for these two browsers? or another alternative to get around this issue.
Tahnk you in advance.
If you add position:relative to .menu-item it will make the absolute positioning work from the list item itself. The only draw back is if you are using a percentage based width on your drop down it will take the width of the parent li as 100% so a pixel width may have to be specified.
try doing
.sub-list{
padding:0px !important;
}
and if by second menu u want it to come under contact us
then change the position of the div
<div class="my-sub-menu">
<ul class="sub-list">
<li class="list-item"><a>History</a></li>
<li class="list-item"><a>Personal Details</a></li>
<li class="list-item"><a>Preferences</a></li>
<li class="list-item"><a>Bonuses</a></li>
<li class="list-item"><a>Wishlist</a></li>
<li class="list-item"><a>Newsletter</a></li>
<li class="list-item"><a>Invite Friends</a></li>
<li class="list-item"><a>FAQ</a></li>
<li class="list-item"><a>Sign out</a></li>
</ul>
</div>
into the next li element ie cntact us
kind of a fiddle
fiddle ex
I am not really into all those coding terms, so I am having some difficulties to find answer to my problem. Usually I am just copy paste existing code and try to make some adjustments to what I want. Anyway I am working on a navigation menu on a one-page website. So till now that works. However, I want to have a sub-menu. I tried some things, but I cannot really get what I want. What I want is when I click on a menu item, the sub-menu opens and activate the first sub-menu item.
I found an example: http://inthe7heaven.com/fb-john-doe/dark/
The photo section. I tried to replicate that, but I think the sub-menu is connected to the filtering function of the photogallery.
Can anybody give me some guidance in this?
HTML
<nav class="on_caption">
<ul class="pagination">
<li class="home current">Home</li>
<li class="">About EJ</li>
<li class="">Services</li>
<li class="photos">
Photos
<div id="filter" class="category_filter_list">
<span class="active_link" id="all">All</span>
<span id="cookies">Cookies</span>
<span id="bread">Bread</span>
<span id="baking">Baking</span>
</div>
</li>
<li class="">Classes</li>
<!--<li class="">Testimonials</li>-->
<li class="">Contact</li>
</ul>
</nav>
CSS
nav {
position: absolute;
z-index: 999;
right: 0;
top: 0;
width: 158px;
height: 600px;
display: block;
overflow: hidden;
behavior: url(js/PIE.htc);
}
nav.on_caption {
background: rgba(20,11,19,.6);
-pie-background: rgba(20,11,19,.6);
}
nav.on_caption a {
color: #d0ced0;
}
nav.off_caption {
background: rgba(20,11,19,.08);
-pie-background: rgba(20,11,19,.08);
}
nav.off_caption a {
color: #524b51;
}
nav a {
font-size: 1.143em;
text-transform: uppercase;
}
nav > a {
padding-left: 24px;
}
ul.pagination {
margin: 0;
padding: 0;
padding-bottom: 8px;
list-style:none;
}
ul.pagination li {
margin: 0px 0px 0px 0px;
clear: both;
padding: 8px 10px 0px 24px;
list-style: none;
}
ul.pagination li:first-child {
padding-top: 25px;
}
nav > a:hover,
nav ul.pagination li a:hover,
nav ul.pagination li.current a {
color: #90705B;
}
So I got this code based on the website I provided above. I want the same effect as in the photo section only then for a normal menu item that is not connected to a filter. That is, when the menu item is clicked, the menu gets extended with the sub-menu and the page goes to the first item in the sub-menu. In addition, the sub-menu item gets active.
I managed to get the sub-menu expand and collapse in jsfiddle using a tree-menu. I tested it in jsfiddle and there it works. However, it doesn't work in my website. The menu doesn't expand. The website I am using it in is a single page website. So the menu items are pointing to a section on the page. So, I guess that my href="sub-1" is not working because it's pointing at the 3rd section of the page.
Is there a simple work-around for this? I don't need any fancy jquery effects, it just needs to open.
Furthermore, when the parent item is clicked, the sub-menu needs to expand and needs to activate the first sub-item. How can I do this?
HTML
<nav class="on_caption">
<ul class="pagination">
<li class="home current">Home</li>
<li class="">About EJ</li>
<li class="">Services
<ul id="sub-1">
<li class="">Test</li>
<li class="">Test</li>
</ul>
</li>
<li class="">Photos</li>
<li class="">Classes</li>
<li class="">Contact</li>
</ul>
</nav>
CSS
.pagination > li ul {
display: none;
}
.pagination > li ul:target {
display: block;
}
Made some progress.
HTML
<nav class="on_caption">
<ul class="pagination">
<li class="home current">Home</li>
<li class="">About EJ</li>
<li class="">Services
<ul id="sub-1">
<li class="">Test</li>
<li class="">Test</li>
</ul>
</li>
<li class="">Photos</li>
<li class="">Classes</li>
<li class="">Contact</li>
</ul>
</nav>
CSS
.pagination > li ul {
display: none;
}
jQuery
jQuery(
function($)
{
$('.pagination a').click(function(){$(this).next('ul').toggle();});
}
);
This works now. When I click the menu item, the sub-menu gets expended. However, how do I let the sub-menu collapse again when another menu item is clicked? And how do I let the page automatically go to the first sub-menu item by default when the menu item is clicked?
I need to change something without touching HTML codes.
So I have this code in my HTML
<span class="share">
<ul>
<li>Share </li>
<li class="twitter">twitter</li>
<li class="facebook">facebook</li>
<li class="delicious">delicious</li>
<li class="friendfeed">friendfeed</li>
<li class="addthis">share</li>
<div class="clear"></div>
</ul>
</span>
and this in CSS
.twitter {
background: url('../images/tt.png') no-repeat;
width: 10px;
height: 14px;
}
This works fine, but twitter text is visible under the twitter logo, I don't want those texts to appear in my list, I want to replace them with images in CSS.
Is it possible to do without touching HTML Codes?
Make the text transparent. Since it's a link, you'll want to use a few selectors to make sure all cases are addressed:
.twitter a, .twitter a:link, .twitter a:visited
{
color: transparent;
}
Edit: This other option, while more verbose, has the benefit of keeping the focus border (the little dots that appear when a link is selected) to the size and shape of the twitter icon. Also, the text will not be revealed if selected and copied and pasted. It becomes invisible and unselectable. Here is the technique:
.twitter a {
display: inline-block;
overflow: hidden;
width: 0;
height: 14px;
padding-left: 10px;
}
You could use text-indent:
text-indent: -9999px; /* get rid of any text */
Try making your font-size : 0px; in your css.
use text-indent with a little magic in it :)
HTML:
<span class="share">
<ul>
<li>Share </li>
<li class="twitter">twitter</li>
<li class="facebook">facebook</li>
<li class="delicious">delicious</li>
<li class="friendfeed">friendfeed</li>
<li class="addthis">share</li>
<div class="clear"></div>
</ul>
</span>
CSS:
a.twitter {
background-image:url('../images/tt.png');
display:block;
height:58px;
text-indent:-9999px;
width:200px;
}
So you see the text is indented but still the image is still clickable because i've put a class in the twitter link ;)