I am attempting to create a mouse-over effect on a navigation on my website.
The navigation is a horizontal bar with a few items in it. Code for it below;
<ul>
<li>Home</li>
<li>About us</li>
<li>Our work and portfolio</li>
<li>Contact</li>
</ul>
This has a plain background color and between every <li> is a border to separate the items. Now I want to give a background image on hover, though my problem is that - as you can see - every <li> has a different width because of its contents and my image for the hover is as below;
So it's actually just a black shadow on the left and right. The right shadow must be placed on the absolute right side of the <li> and the left shadow on the absolute left.
Is there any way to achieve this? Not a problem if it's with jQuery or anything like that.
Thanks in advance.
If you want the shadow, and the variable length effect. Then split the image into three parts. And update your markup to something like this
Left Shadow
Center Part
Right Shadow
Then use the following CSS snippet
li a:hover:before { content: url("image/leftshadow.jpg"); }
li a:hover { background-Image: url("image/center.jpg"); }
li a:hover:after { content: url("image/rightshadow.jpg"); }
Your image looks like a linear gradient, so you could try using
background-image: linear-gradient(to right, #111, #333, #111);
You may want to add support for older browsers.
Related
I currently have it to where the current link is "underlined", but the underline is an image as I wanted it to look Android-style. The image looks like this when the web page is loaded on a normal desktop pc:
The image itself is a simple image with the top 90% transparent and the bottom 1/8th of it blue. Whenever the web page is loaded on a phone, it turns into this:
The css for it is this:
#currentlink
{
background-image:url('../images/menu-underline.png');
background-position:center;
}
With this html:
<div id="menu">
<ul id="menulinks">
<li>About me</li>
<li><a id="currentlink" href="">Apps & Projects</a></li>
<li>Work with Me</li>
</ul>
<hr>
I have also tried making the image simply just the blue line, and changing the css to have background-position:bottom but it made the whole entire box blue.
Why not just use the border-bottom property?
#currentlink {
border-bottom: 5px solid #35B5E5; /* this is your blue color */
}
The problem is on a phone your li's are adjusting, and the image isnt scaling proportionally.
This should resolve your issue:
#currentlink {
background-image:url('../images/menu-underline.png') no-repeat center center fixed;
}
The problem is your background image repeated itself, for the Android Device, in which you viewing the WebPage, either you can fire media queries for the same to adjust the background image for specific resolution only.
As #natewiley suggested I'd recommend doing such simple styling with CSS only, so your client doesn't have to download extra assets (images). But in your particular case, since on a phone the size of the list items changes and thus causing the background image to shift position.
You can try setting background-repeat: no-repeat to prevent the background image from repeating itself to fill the space, so you should at least see just one blue line instead of two. Though you'll need to adjust where the blue line should be.
EDIT: background-position does change the position of the background image. I realized the actual problem I am facing is something else, which can be seen on this thread:
Background image disappears when changing its background-position?
Okay so I have a set of links (a href's) inside an unordered list, and when the user hovers over them, I want a black background image to show up on top of the link and change the links color to black. I already have the background image which shows up photoshoped. Here is what I did so far
li:hover {
color: white;
background: url(../images/liHover.png);
}
Now, the problem is that the image doesn't show where I want it to show. I want the link to be in the center of the image. The image is like 3 pixels below where I actually want it to be. It is the same for which ever link I hover over, the image is always 3 pixels below where I want it to be. Is there a way to change the position of the image which shows up and a way to move that image a few pixels above where it is normally supposed to be? (even if we cannot do this with CSS, if someone can write a Javascript function which can get this accomplished, that would be great).
The list is just
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
i think this is what you mean:
li:hover {
color: white;
background: url(../images/liHover.png) no-repeat center center;
}
if it doesn't center the way you want, play with the center center values which are x / y (horizontal / vertical). they can be also px,em or % values.
I've written this code to create simple CSS and Javascript dropdown menu.
HTML:
<li>XYZ
<ul id="rankSubMenu" onmouseover="showRanksSubmenu()" onmouseout="hideRanksSubmenu()">
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>
</li>
CSS:
#rankSubMenu {
display: none;
position: absolute;
bottom: 10px;
left: 278px;
}
JS:
function showRanksSubmenu() {
document.getElementById('rankSubMenu').style.display = 'block';
}
function hideRanksSubmenu() {
document.getElementById('rankSubMenu').style.display = 'none';
}
Menu items have of course some height, background and other stuff to make them look like buttons. The problem is that, there is some empty space between this buttons (like a few pixels) and when user stops mouse cursor there, menu disappear (in fact menu always does that, unless you move your cursor real fast). I tried to define this whole area as div or try any other ideas that I thought about, but with no success. Any suggestions how can I solve this?
First off, welcome to the wonderful world of web development. Based on your use of inline styles, li as a top-level container, and attempted use of Javascript for a simple menu show/hide I can tell you're pretty new. No matter! Its a learning process, and web development is fun. :)
First, for what you want, you can do this via CSS only, and without the need for position:absolute in your menu items or anything crazy like that. Here is a working example of a cleaner menu display:
jsFiddle example
My recommendations for the learning process:
Get comfortable with external CSS sheets, use of inline styles is pretty ancient, and very difficult to maintain
Learn about the benefits of classes over IDs when styling; rarely (never?) do you need to use IDs for styling, and class is usually preferred because you can apply it to multiple elements
Get familiar with proper semantic markup; for example li should not be a top-level container, only the container of another ul if there is a sub list or something
Learn external JS event handlers; using inline onwhatever handlers in HTML is another pretty ancient method, and again makes maintenance very difficult
Best of luck!
CSS
.dropdown li{
float:left;
width: 240px;
position:relative;
}
.dropdown ol{
position:absolute;
left:-9999px; /* Hide off-screen when not needed (this is more accessible than
display:none;) */
}
.dropdown li:hover ol{ /* Display the dropdown on hover */
left:0; /* Bring back on-screen when needed */
}
HTML
<ul class="dropdown">
<li>
<a href="#" >Your Link</a>
<ol>
<li> Your Link 1 </li>
<li> Your Link 2 </li>
</ol>
</li></ul>
What else would u need for this? Is there any reason to use javascript to create this?
Take a look at this Fiddle. Perhaps it's what you're looking for.
it's only using HTML and CSS.
#rankSubMenu is probably 0px high, try to add some height, also you can do this js free by using :hover
My guess would be set your anchor tags to display block. If an anchor tag is not a block it will ignore a few css properties, width and height being the two main ones, so your click is just the text.
another possible reason is that the submenu coming in is partially covering the link (check your inspector to see what area it's covering).
if you set the height to that of the original item with overflow hidden and then on hover set height to auto
HTML
<nav class="navigation">
<ul>
<li>Menu</li>
<li>Home</li>
<li>About</li>
</ul>
</nav>
CSS
.navigation {
height: 20px;
overflow: hidden;
}
.navigation {
height: auto;
}
no javascript needed
I'm trying to use Twitter Bootstrap's new affix option, but I can't quite get it right.
I have put together an example at http://jsfiddle.net/yPgUu/1/ and the relevant part is
<ul class="nav nav-list" data-spy="affix">
The left nav starts off at the correct position. However, as you scroll down, then there is a gap at the top of the nav. I'd like the nav to always be at the top of the current view, instead of being a gap.
I've also tried playing around with data-offset-top="200", but that just seem to makes the menu bounce around.
What am I missing?
OK, so this needs to be done in two parts.
http://jsfiddle.net/yPgUu/2/
First, assign data-offset-top="50" and then modify the affix property in css
.affix {
top: 10px;
}
I have a bunch of elements on a page that when hovered show a menu. Because hovering requires to be on the element and if you are right at the border it gets very tricky to activate them iIwas wondering if there is a way to activate the hover menu when the mouse is close to the element, let's say at a tolerance rate of 10 pixels from any border (N,S,E,W).
Tracking the mouse on the page is really not an option, too much processing needed on the client side and the page is already loaded with lots of javascript code.
I think wrapping the menu item content with a div / span element and then applying the hover styles to that would work best. And then as Sime said, increase the padding on the menu item.
For example the html would be:
<ul class="menu">
<li><span>content here</span></li>
</ul>
Then the CSS would be something like:
li {
padding:10px;
}
li:hover span {
/* Hover style of menu item here */
}