how do you achieve the effects when you hover the links at top(HOME,ABOUT , JOBS)
which you can see in http://www.webdesignerwall.com/ ,
can someone give me a hint ? or any?
A lot of people here are far too quick to whip out the scripting languages. Tsk, tsk. This is achievable through CSS. I'd even be inclined to say that there is no need for additional mark-up. One could use a background image on the :hover state. Simple.
Each link (#nav li a) contains the nav item text plus an additional span which is set to "display:none" by default. The span also has a set of other styles relating to its position and background-image (which is the text that appears).
On #nav li a:hover the span becomes display:block, which makes it visible at the defined position. No scripting needed.
HTML
<ul id="nav">
<li>Home <span></span></li>
<li>About <span></span></li>
<li>Jobs <span></span></li>
</ul>
CSS:
#nav li a span{display:none}
#nav li a:hover span{display:block}
This is a completely stripped down version of course, you will need to add your own positioning and other styles as appropriate.
There are many, many ways this could be acheived. The simplest would be to have each navigation item change the above image to reflect its corresponding graphic.
<div class="hoverImages">
<img src="blank.jpg" style="display:none;" />
</div>
<ul>
<li class="home">Home</li>
<li class="about">About</li>
<li class="contact">Contact</li>
</ul>
-- jQuery
$("li.home").hover(
function () {
$(".hoverImages img").attr("src", "hoverHome.jpg").show();
},
function () {
$(".hoverImages img").hide();
}
);
The way it's achieved is by using an empty <span>.
It's positioned off screen by default and move into view on hover
Like so:
<ul>
<li>Link<span> </span></li>
<li>Link<span> </span></li>
<li>Link<span> </span></li>
</ul>
And the CSS:
ul li a {
display: relative;
}
ul li a span {
position: absolute;
top: -50px; /* or however much above the a you need it to be */
left: -1000em;
}
ul li a:hover span {
left: 0;
}
It is probably a script on the Home, About and Jobs links that makes a floating div tag visible on mouseover and invisible on mouseout.
Here is a simple code example achieving a similar effect:
<html>
<body>
<a onmouseover="document.getElementById('my-hidden-div').style.display='block'" onmouseout="document.getElementById('my-hidden-div').style.display='none'">Hover Over This</a>
<div style="display:none" id="my-hidden-div">and I appear.</div>
</body>
</html>
Using jQuery you would just do something like
$(#MenuId).hover(function() { // show hidden image},
function() { // hide hidden image});
by the fact that you can rollover the whole area when on rollover i would suggest that it is simply an alternative background that appears on rollover using css. the elements themselves might then be positioned absolutely within the navigation container.
In this particular instance, the developer placed a span tag inside the li elements that make up the menu. That span has (most notably) these properties:
height: 33px;
top: -26px;
left: this varies to position the spans properly
position: absolute;
After that, just some JavaScript to make the span appear/disappear.
A pure CSS solution is explained on Eric Meyer site: Pure CSS Popups 2.
Related
I'm working with Bootstrap. I'm trying to add an image as number icon to my list. It is kind of a bad practice to add <div> tag inside <ul> tag, so is it possible to add icon with ::before?
Here's my code:
<ul class="lizt" id="sub-lizt">
<li class="item">1. Bunch of geebrish</li>
<li class="item">2. Bunch of geebrish</li >
</ul>
ul {
list-style-image: url('/your_img_path.jpg');
}
You can use this in your CSS. For in-depth just take a look Here.
Putting a div inside an li tag is not a bad practice. It would be wrong to put a div directly inside a list ol/ul, but not inside a list item.
That being said, you don't need a div to put a numbered image as bullet for your list, because, in fact, list-style property allows using an image as bullet.
.item {
list-style: url('http://via.placeholder.com/32x32/000/fff?text=1');
}
.item:nth-child(2) {
list-style: url('http://via.placeholder.com/32x32/000/fff?text=2');
}
.item:nth-child(3) {
list-style: url('http://via.placeholder.com/32x32/000/fff?text=3');
}
<ol class="lizt" id="sub-lizt">
<li class="item">Bunch of geebrish</li>
<li class="item">Bunch of geebrish</li >
<li class="item">Bunch of geebrish</li >
</ol>
You'd probably want your images vertically aligned in the middle with your text. In that case, you have many options, like moving up your a elements from its relative position.
.item a {
display: inline-block;
position: relative;
top: -0.75em;
}
I have a simple menu with a hover state:
<nav id="menu">
<div>Home</div>
<div>
1
<nav>
<div>1.1</div>
<div>1.2</div>
<div>1.3</div>
</nav>
</div>
</nav>
CSS:
#menu > div > nav {
display: none;
position: absolute;
z-index: 9999;
}
#menu > div:hover > nav {
display: block;
}
But the :hover state never ends. After another tap (somewhere else) :hover still stays. Can I get around this without javascript? (Fiddle)
It seems like the only way to get rid of :hover is to :focus somewhere (element.focus()) or hover on something else.
No. Hover states are partially broken on some mobile devices simply because you can't hover over an element. You will have to use javascript.
You can use the hover media query to disable hover states on iOS:
https://developer.mozilla.org/en-US/docs/Web/CSS/#media/hover
I have created a dropdown menu and now want a background that drops down along with it. Here is some of my code:
HTML:
<div id="background"></div>
CSS:
div#background{
height: 150px;
background-color: white;
display: none; }
ul#navmenu li:hover div#background
{
display: block;
}
(I know there is something wrong with this code, this is what I picked up so far from the Internet...)
li are the list items that comprise my menu.
In the HTML code, the "background" divider is inside and at the end of another divider which contains the dropdown menu:
<div id="menu">
<ul id="navmenu"></ul>
<div id="background"></div>
</div>
ul is my unordered list which contains the menu.
What I want is to have the menu drop down along with the background. The background should also cover (be on top) of the text that comes immediately after the menu. (The menu drops onto the text).
I would have loved to post a picture to make it a little clearer but I don't have enough reputation points yet... sorry :S
If possible I'd like to do it only using css, but I'm also open for other solutions. Any ideas?
Your css is for a child of the li
This html code for your CSS
<div id="menu">
<ul id="navmenu"><li><div id="background"></div></li></ul>
</div>
The background of your HTML is the sibling of navmenu.
This CSS code for your HTML to show background when hovering over navmenu.
<style>
div#background{
height: 150px;
background-color: white;
display: none; }
ul#navmenu:hover +div#background
{
display: block;
}
</style>
If you want to do that from the LI you would need a parent's, sibling selector. I don't have one and would like one but jQuery could do the trick.
Adjacent Sibling (+) combinator is available in Internet Explore 7 plus and is CSS 2.1 standard.
Assuming you want the background someplace other than inside the li block, position:relative it to the area you want it to appear.
I have the following <li> and I would like the whole li to behave as a link. Currently, only the text in the span acts as a link. Also, is it possible to change the colour of the text on hover. My code only changes the colour of the text when I hover over it, but stays the same when I hover elsewhere in the block. Any help is appreciated.
I've put the demo on jsfiddle: http://jsfiddle.net/noscirre/JtVGp/4/
Try this
http://jsfiddle.net/Bongs/JtVGp/5/
I've added class to the link and some css to li and the link...
HTML
<li class="app1">
<a title href="#" class="blocklink">
<span>ANOTHER APP</span>
</a>
</li>
CSS
.app1 {position:relative;}
.blocklink{position:absolute;top:0px;left:0px;width:100%;height:100%;}
With respect to the changing color, change your last CSS entry from
#app-container ul.apps li:hover a:hover { color: #fff; }
to
#app-container ul.apps li.app1:hover a { color: #fff; }
To make the whole <li> box behave like a link, you can add an onclick handler via JavaScript to it, e.g., like this:
var li = document.querySelector( '#app-container .app1' );
li.addEventListener( 'click', function(){
window.location = 'your/new/url';
} );
and maybe change the cursor attribute by using cursor: pointer (MDN link).
Simply add this style to your navigation:
ul.menu > li > a {
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
This solution does not consider a span tag inside. The HTML looks like this:
<ul class="menu">
<li><a>Navigation Point 1</a></li>
<li><a>Navigation Point 2</a></li>
</ul>
I just have been looked into Google's source code and I saw that the side bar is created from the <ul> and <li> tags which the use for them is making list.
So as I said I saw their side menu bar and I tried to do the same, something like this : http://jsbin.com/oyibok/edit#javascript,html,live
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
</head>
<body>
<ul>
<li> dsds </li>
<li> dsds </li>
</ul>
</body>
</html>
not quiet worked out, is there any technique that I can use to do the same as Google's did and make a list without the followed dot?
To get rid of the dots, just add the following css:
ul {
list-style: none;
}
yes - the answer is css. you should do something like
ul {
list-style-type: none; /* look mom - no dots */
}
ul li {
display:inline; /* look mom - no block display - only if you want a horizontal nav */
}
a {
text-decoration:none /* look mom - no underline */
}
also as you may notice if this is a navbar you probably would put links inside the li element with a elements
by the way - all modern nav bars are lists..
In addition to removing the bullets/dots in CSS, you may also want to reset the margins to margin: 0px if you want the top-level list items to be flush with the left side of their container.
In most browsers, just removing the bullets still leaves white space where they normally are.
A list has the bullet points by default, and also some margins and padding.
<ul>
<li>list item 1</li>
</ul>
With CSS you can change the way the list looks.
<style>
/* the styles go in between the style tag */
</style>
You can use CSS to grab each element in the list and change the properties.
For example I usually start by removing the list style, margin and padding.
ul { list-style:none; margin:0; padding:0; }
Next you can change the link or anchor tags to have a width and height and background colour.
Links by defaul are inline elements, which means they don't force a new line but flow inline.. I need them to be displayed as a block element so I can style it.
ul a:link,
ul a:visited { display:block; width:100px; height:20px; line-height:20px; background:blue; }
Now when the user hovers the mouse over the link you can change its colour again, CSS stacks so all the styles you wrote above will still apply but we can over write whatever we choose.
ul a:hover { background:orange; }
Some reading: http://www.w3schools.com/css/css_list.asp
Once you know how to select elements using CSS, you will be able to create pretty much anything.
You can give HTML elements a unique id or a class.
An id is used to select a single element, on it's own.
But if you have a lot of elements, a class is used.
"#" for Ids and a "." For classes.
Example:
<div id="something">some text wrapped in a div with an id</div>
<div class="something">a div with a class</div>
<div class="something">a div with a class</div>
<div class="something">a div with a class</div>
<style>
#something { background:red; }
.something { background:blue; }
</style>
The startings
http://jsbin.com/oyibok/5/edit