I have a vertically displayed navigation menu. I would like a bullet point to appear to the left of the page currently being viewed. I've read a little bit about using background changes applied to li to indicate page, but I don't know how to apply that to using bullets.. Any ideas?
<nav>
<ul>
<li>home</li>
<li>about</li>
<li>lookbook</li>
<li>services</li>
<li>contact</li>
<li>blog</li>
</ul>
</nav>
nav {
position: fixed;
right: 13%;
top: 65%;
}
nav ul li {
text-align: right;
}
http://jsfiddle.net/jtRws/
Update
Live examples of all proposed solutions
Working with AMC it was determined that a JavaScript solution would work better given the requirements. All content would appear on one page so the CSS solutions would not work based on my findings. I proposed the simple jQuery code to show a bullet when the link was clicked.
jQuery
$(window).load(function(event) {
$('a').click(function() {
$('#Nav li').removeClass();
$(this).parent().addClass("current");
});
});
CSS
#navcontainer3 ul {
width: 200px;
list-style-type:disc;
}
#navcontainer3 ul li {
color: #ccc;
float:right;
clear:right;
}
#navcontainer3 ul li.current {
color: #000;
}
This page contains examples of all the solutions but you'll find the jQuery solution alone at this link: http://jsfiddle.net/jtRws/10/.
Interesting problem. Obviously, there are JavaScript solutions, but it looks like you want a pure CSS solution.
Solution 0
Hide the other list item bullets by setting the list style color to the background color.
All pages will have the same navigation HTML but each page's <body> will have an id unique for that page. For example: <body id="home">, <body id="products">, etc. Then, using some clever CSS, the current page will obtain the specific styling definition (last def below).
#navcontainer0 ul {
width: 200px;
list-style-type:disc;
}
#navcontainer0 ul li {
color: #fff;
float:right;
clear:right;
}
body#home #homenav0,
body#products #prodnav0 {
color: #000;
}
Solution 1
Use background to show and hide the bullet image. Based on this article I used the following code. The article explains the technique in greater detail. Below you'll find the same code as the live example.
CSS
#navcontainer ul {
width: 200px;
padding:0;
margin:0;
text-align:right;
}
#navcontainer ul li a:hover {
color: #930;
background: #f5d7b4;
}
body#home a#homenav,
body#products a#prodnav,
body#faq a#faqnav,
body#contact a#connav {
background:url(bullet.gif) 0 50% no-repeat no-repeat;
padding-left:15px;
}
Products Page
<body id="products">
<div id="navcontainer">
<ul id="navlist">
<li><a id="homenav" href="index.html">Home</a></li>
<li><a id="prodnav" href="products.html" >Products</a></li>
</ul>
</div>
</body>
I assume you're using anchors to navigate through page sections, so the only way I can think of right now is using javascript(jQuery).
I've updated your code example: http://tinyurl.com/a6ypyuz
In addition to #earthdesigner answer, if you don't want to add jquery then use this javascript instead:
http://jsfiddle.net/7uxcg/31/
window.onload = function() {
// var nav = document.getElementById('nav');
var nav = document.getElementsByTagName('NAV')[0].children[0];
for(c in nav.children) {
var li = nav.children[c];
if(li.nodeName == 'LI') {
li.onclick = function() {
changeClass(this.children[0].hash);
}
}
}
function changeClass(cur) {
var nav = document.getElementsByTagName('NAV')[0].children[0];
for(c in nav.children) {
var li = nav.children[c];
if(li.nodeName == 'LI' && li.children[0].hash == cur)
li.className = 'active';
else
li.className = ''
}
}
};
I understand that you want bullets only to current page. So first of all we're goind to eliminate normal bullets.
ul {list-style-type:none;}
Than i saw that you use id's for content divs on every page. Combining that with atribute selector here's an example of what you could do:
#home li a[href='#home']:before, #about li a[href='#about']:before {
content:"•";pointer-events:none; text-decoration:none;
}
Related
In the following coding, the listmark is placed on top of the image only if it is displayed in Chrome.
(Float is effective for text, it will be displayed on the right side of the image without problems)
Also, when refresh with F5, the listmark will be displayed on the right side of the image without problems.
To prevent the listmark from being placed on top of the image from the beginning, could someone please tell me what to do?
img {
float: left;
}
ul li {
margin-left: 20px;
}
<div>
<img src="images/sample.jpg" alt="sample" width="50%" />
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
<li>eee</li>
</ul>
</div>
Updates:
When the list gets long, I want the lists wrap images like below.
https://embed.plnkr.co/uo1u4YOQHAWpFEO117QG/
img {
display: inline-block;
}
ul{
display: inline-block;
}
ul li {
margin-left: 20px;
}
<div>
<img src="images/sample.jpg" alt="sample" width="50%" />
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
<li>eee</li>
</ul>
</div>
img {
display: inline-block;
}
ul{
display: inline-block;
}
Try this.
You can try to float your <ul> like so:
ul{
float: left;
width: calc(50% - 20px);
}
That should float everything and the ul will always be on the right side of the image.
I would like to style my menu bar Like THIS.
It's fixed to the top of the site when you scroll down and it isn't fixed where it is when the page is loaded.
How can it be done with CSS?
What you're after is a 'sticky navbar/menu'.
The simplest way would be to add the below CSS to your menu/navbar
position:fixed;
top:0px;
That said, for an effect closer to the one you've posted, you'll probably want to look at using some jQuery, e.g.:
$(window).bind('scroll', function() {
if ($(window).scrollTop() > 50) {
$('.menu').addClass('fixed');
}
else {
$('.menu').removeClass('fixed');
}
});
What this does is 'fix' the menu bar to the top of the page once you scroll past a certain point (e.g. 50px) by adding the CSS class 'fixed' to the .menu element, the fixed class would simply be e.g. the CSS above.
There are some nice examples listed here.
Source: Creating a sticky nav css and jquery
HTML
<div id="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li>Shop</li>
<li>Contact</li>
</ul>
</div>
<div id="content">
This is some content 0<br/>
This is some content 1<br/>
This is some content 2<br/>
This is some content 3<br/>
This is some content 4<br/>
This is some content 5<br/>
This is some content 6<br/>
This is some content 7<br/>
This is some content 8<br/>
<div id="data" />
</div>
CSS
* {
font-family: Consolas,Sans-serif;
font-size: 10pt;
}
#menu {
position: absolute;
width: 100%;
}
#menu.out {
position: fixed;
}
#menu ul {
margin: 0;
padding: 1em .5em;
list-style: none;
background-color: #fc9;
}
#menu ul li {
display: inline-block;
}
#menu ul li a {
padding: 5px .5em;
}
#content {
background-color: #ebebee;
padding: 4em 1em 1em;
height: 900px;
}
JQuery:
var menu = $("#menu");
var ul = menu.find("ul");
var content = $("#content")[0];
var data = $("#data");
var menuHeight = menu[0].getBoundingClientRect().bottom;
var inView= true;
$(document).scroll(function(evt) {
evt.preventDefault();
var top = content.getBoundingClientRect().top;
var nextInView = top+menuHeight > 0;
if (inView ^ nextInView)
{
data.append("<div>Switching.</div>")
inView = nextInView;
if (inView)
{
menu.removeClass("out");
}
else
{
menu.addClass("out");
ul.hide().slideDown("fast");
}
}
});
Fiddle :Demo
Courtesy : Robert Koritnik
Hope this helps
Happy Coding
I have this html code and style "this is just an example":
<div id="mn" style="margin-top:200px;">
<div class="first">1</div>
<div class="second">2</div>
<div class="third">3</div>
<div class="fourth">4</div>
</div>
<style type="text/css">
#mn, #mn div { display:inline-block; vertical-align:middle; }
#mn div { width:350px; margin:5px; /* float:left Comment */ }
div.first { height:5px; background-color:Red; }
div.second { height:120px; background-color:#999 }
div.third { height:50px; background-color:Yellow }
div.fourth { height:180px; background-color:#ccc }
</style>
The problem is, the element on left "the yellow and red ones" have a big space or bottom margin between these.
I need delete this big margin or spacing and use just 5px in all element.
I created a script with jquery that take the List and move them to a divs, something like that:
<div id="mn_left"></div>
<div id="mn_right"></div>
<div id="mn" style="margin-top:200px;">
<div class="first">1</div>
<div class="second">2</div>
<div class="third">3</div>
<div class="fourth">4</div>
</div>
$(document).ready(function () {
$("div", "#mn").each(function (e, value) {
if ($("#mn_left").height() <= $("#mn_right").height()) {
$("#mn_left").append(value.outerHTML);
}
else {
$("#mn_right").append(value.outerHTML);
}
});
});
The script works fine, but I want to do it without scripts.
Edit...
I mistook, I changed the li by divs... But it's exactly the same. The Html Looks Like that:
http://postimg.org/image/dh6dwdjc1/
What I really want is this
http://postimg.org/image/otnkrwhep/
First off, here is your code properly set up using list markup, since you said it's a list:
HTML:
<ul id="mn">
<li class="first">1</li>
<li class="second">2</li>
<li class="third">3</li>
<li class="fourth">4</li>
</ul>
CSS:
#mn {padding:0; margin:0;}
#mn, #mn li { display:inline-block; vertical-align:middle; }
#mn li { width:350px; margin:5px; }
li.first { height:5px; background-color:Red; }
li.second { height:120px; background-color:#999 }
li.third { height:50px; background-color:Yellow }
li.fourth { height:180px; background-color:#ccc }
(JSFiddle Link 1)
Then, remove the margin from #mn li:
#mn li { width:350px; /* margin:5px; */ }
(JSFiddle Link2 )
You'll see the list items are flush now, except the first item, where the line height is taller than the item height. To fix that first one, give the list items an overflow:hidden; and change the display from inline-block to just block.
#mn, #mn li { display:block; vertical-align:middle; }
#mn li { width:350px; overflow: hidden;}
(JSFiddle Link 3)
That should be it for you, unless I've misunderstood.
Now that I understand what you're trying to do...
One way to do that is to create a class for the items that will be in the second colum:
#mn .col2 { position: absolute; left: 355px; top:0; margin-top: 0;}
JSFiddle Example. (PS, You need #mn{position:relative;} for the above to work.)
The problem with this is that if you have more than one item in the second column, you'll have to give the second (and third, fourth, etc) items a custom top position so that they line up properly.
This seems like a perfect place to use Javascript instead of CSS. And that's coming from a proponent of "always use CSS whenever you can!"
How about this? Using floats instead of absolute positioning.
#mn {width: 720px;}
#mn div { width:350px; float:left; margin:5px; }
#mn div.second {float:right;}
div.first { height:5px; background-color:Red; }
div.second { height:120px; background-color:#999; }
div.third { height:50px; background-color:Yellow }
div.fourth { height:180px; background-color:#ccc }
Floated all to left.
Added a new CSS rule for the containing div of
#mn. The width is equal to the width of each child div plus it's
margins, so ( 5px + 350px + 5px ) = ( 360px x 2 ) = 720px.
Added new CSS declaration for the second div.
I want to display 3 different rollover image on mouse hover over of 3 different<a> element. For this i have use following mechanism but this doesn't solve any purpose. this is as follows:-
#item1 a {
position: absolute;
background-image:url("../images/step1_without_rollover.gif");
}
#item1 a:hover
{
position: absolute;
background-image:url("images/step1_rollover.gif");
}
#item2 a{
position: absolute;
background-image:url("../images/step2_without_rollover.gif");
}
#item2 a:hover {
position: absolute;
background-image:url("../images/step2_rollover.gif");
}
#item3 a{
position: absolute;
background-image:url("../images/step3_without_rollover.gif");
}
#item a:hover {
position: absolute;
background-image:url("../images/step3_rollover.gif");
}
NOTE: i have only begining knowledge of CSS. it is registration process classified into 3 steps.
Thanks !!
you have some unnecessary css codes there. See the code below. It hopefully does what you want. Try cleaning up your css codes a little before you post. that being said, I still dont understand why you need 3 image rollovers though..hope this helps
#item1
{
position: absolute;
top: 492px;left :190px;width:400px; height:140px;
}
#item1 a {
background-image:url("images/image1.gif");
}
#item1 a:hover
{
background-image:url("images/image2.gif");
}
I'm not sure what are you asking in the question, anyway remember that you cannot have more than one ID in the same HTML element, or the same ID in more than a HTML element. IDs must be unique.
EDIT
As much as I know, achieving 3 different background-image changes to the same element using only a :hover state is not possible using only CSS. You need JavaScript to give the element or its parents different classes when you want the image to change.
html
<div id="items">
Item 1
Item 2
Item 3
</div>
css
#items
{
position:absolute;
top:490px;
left:190px;
width:400px;
height:50px;
}
#items a.item1
{
position:absolute;
display:block;
height:50px;
width: 400px;
top: 490px;
left:242px;
background:url("../images/step1_without_rollover.gif");
}
#items a.item1:hover
{
background:url("../images/step1_rollover.gif");
}
#items a.item2
{
position:absolute;
display:block;
height:50px;
width: 400px;
top: 490px;
left:242px; /* don't forget to change your left value */
background:url("../images/step2_without_rollover.gif");
}
#items a.item2:hover
{
background:url("../images/step2_rollover.gif");
}
#items a.item3
{
position:absolute;
display:block;
height:50px;
width: 400px;
top: 490px;
left:242px; /* don't forget to change your left value */
background:url("../images/step3_without_rollover.gif");
}
#items a.item3:hover
{
background:url("../images/step3_rollover.gif");
}
Ok. I think I understand your point better now. So you have all the 3 steps on the same page. This means that you cannot have the same id 3 times on the page. You can do something like this though:
Edit
So you have three different pages. This means that you can use item1 id on all the different pages. But your stylesheet will still need to understand which page it is. You could wrap the item1 div around another div that has a different classname and then style it accordingly. If you go this way then this is what you will need to do:
HTML for Page 1:
<form class="page1" ...>
<div id="item1">
Step 1
.....
</div>
</form>
HTML for Page 2:
<form class="page2" ...>
<div id="item1">
Step 2
.....
</div>
</form>
HTML for Page 3:
<form class="page3" ...>
<div id="item1">
Step 3
.....
</div>
</form>
And your stylesheet will look as follows:
#item1
{
position: absolute;
top: 492px;left :190px;width:400px; height:140px;
}
.page1 #item1 a {
background-image: url("images/image1.gif");
}
.page1 #item1 a:hover
{
background-image:url("images/image1_hover.gif");
}
.page2 #item1 a {
background-image:url("images/image2.gif");
}
.page2 #item1 a:hover
{
background-image:url("images/image2_hover.gif");
}
.page3 #item1 a {
background-image:url("images/image3.gif");
}
.page3 #item1 a:hover
{
background-image:url("images/image3_hover.gif");
}
Or there is another way where you can use JavaScript to analyse the page and then change the background image based on that.
So I'm creating an unordered list, floated to the right and styled with varying backgrounds to fashion a menu.
It was hell setting up the Jquery (animation queues, repeating animations while hovered, etc,) but I got it to work finally. Here's the CSS and Jquery for the navigation, and animation.
<script type="text/javascript">
$(document).ready(function(){
$("#nav li").hover(function() {
$(this).children('p').stop(true, true).animate({opacity: "show"}, "fast");
}, function() {
$(this).children('p').stop(true, true).animate({opacity: "hide"}, "fast");
});
});
</script>
#nav {
margin:0;
padding:0;
background:#FF0000;
clear:both;
float:right;
}
#nav li {
position:relative;
list-style:none;
padding-left:0;
margin-left:0;
float:right;
width:75px;
}
#nav li a {
display:block;
width:75px;
height:48px;
margin-left:0;
padding-left:0;
Z-index:20;
}
.hover {
display:none;
position:absolute;
top:0;
left:0;
height:48px;
width:75px;
z-index:0;
}
.nav1 a {
background-image:url(images/nav_1.gif)
}
.nav2 a {
background-image:url(images/nav_2.gif)
}
.nav3 a {
background-image:url(images/nav_3.gif)
}
.nav4 a {
background-image:url(images/nav_4.gif)
}
.nav1 p.hover {
background-image:url(images/nav_1_hover.gif)
}
.nav2 p.hover {
background-image:url(images/nav_2_hover.gif)
}
.nav3 p.hover {
background-image:url(images/nav_3_hover.gif)
}
.nav4 p.hover {
background-image:url(images/nav_4_hover.gif)
}
and then here's the HTML for the menu....
<ul id="nav">
<li class="nav1"><img src="images/nav_spacer.gif" border="0" /><p class="hover"></p></li>
<li class="nav2"><img src="images/nav_spacer.gif" border="0" /><p class="hover"></p></li>
<li class="nav3"><img src="images/nav_spacer.gif" border="0" /><p class="hover"></p></li>
<li class="nav4"><img src="images/nav_spacer.gif" border="0" /><p class="hover"></p></li>
</ul>
I hope this is sufficient -- I'm still pretty green to Javascript/Jquery and CSS, and I can't seem to figure out why there's a buffer between my menu items.
I'd appreciate any help.
Thanks!
Which browser? I don't get any buffer in between.
Of course, I don't have your images to work with either. Perhaps there's some overflow taking place.
Try adding clip:auto; overflow: hidden; to your #nav li a.
#nav li a {
display:block;
width:75px;
height:48px;
margin-left:0;
padding-left:0;
z-index:20;
clip: auto;
overflow:hidden;
}
Also, I may be wrong about this, but as far as I remember, you'll need to set positioning in order for z-index to have any effect. Like: position:relative.
Uhm... Try to add display:block for all images inside of a tag. This should work.
Correcting my original answer: You only set the left-margin, maybe you should also try setting the right margin to 0.