I would like to use images for navigation names and change the image for each menu item on hover. What is the best approach for doing this? An example would be great. Each list item would have it's own image for normal, active and mouse over.
I'm trying to make the menu names look like they are being pushed in on mouse over.
It is easy to do with css, just put :hover after the element you want to change.
I did a very quick example without trying the code, so I'm sorry if it doesn't work, but you get the drift.
The HTML:
<ul>
<li class="link1"><a>Link 1</a></li>
<li class="link2"><a>Link 2</a></li>
<ul>
The CSS:
li.link1 {
background: url('img/link1_normal.png');
}
li.link1:hover {
background: url('img/link1_hover.png');
}
li.link2 {
background: url('img/link2_normal.png');
}
li.link2:hover {
background: url('img/link2_hover.png');
}
I got this jsfiddle rigged up for you. It involves the background-image property and the :hover and :active css selectors. You can read up on those here.
It's recommended for this though that you read up on sprites instead of using individual images though, for performance reasons.
Related
First time asking a question here...
I'm making a drop down menu with some effects that I got from cssdeck.com.
Basically the nav is from one source, and the sub menu from another.
I've mixed two cssdeck.com source to make it look like one.
So far, I got the sub menu to appear on hover, but can't make it stay visible so I can click on the sub menu.
The code is pretty long and complicated and I'm not exactly sure how to show/share it for you to check...
How do I make "A" to appear on "B":hover and make "A" stay visible when I move the pointer to "A" to select something on "A"??????
<nav>
<div class="nav_main ph-dot-nav">
Home
<a href="#">About
<div id="sub_about">
<ul>
<li class="li_first">회사소개 </li>
<li>대표인사말 </li>
<li class="li_last">회사연혁</li>
</ul>
</div>
</a>
Services
Portfolio
Partners
Contact
<div class="effect"></div>
</div>
</nav>
Fiddle Demo here
You can solve this, if you also show the submenu if you hover on it. See
https://jsfiddle.net/7xfrod2s/
#sub_about:hover {
visibility: visible;
}
Also I moved the visible: hidden style to the parents tag of ul (#sub_about).
Maybe you need an other :before tag so that there is no gap between the header and the submenu (a curser-bridge so to say) ;)
To achive this with CSS there's are rules your need to stick with. First take a look as this pic.
http://i.imgur.com/IAsz39w.png
(I'd love it, if someone help me post a pic)
must be have no space in between your Menu tag and subMenu. It will fail if there is 1px in between thse element.
use the simple hover stage like follow
subMenu must be children of Menu
hide the subMenu
.subMenu{
display: none;
}
make subMenu appear when you hover on its parent or itself
.menu:hover .subMenu{
display: block;
}
Explaination: the hover state of DOM quite simple. if you are hovering on a child element it also mean that you are hovering on its parent. So this is while you must not let any space inbetween Menuand subMenu. Because the movement your cursor hover on that 1px for 1ms the DOM will understand as the hover state over. So it will hide the subMenu away
For example: in the pic. Pretending like your submenu not hiding, so if you are hovering on subMenu the DOM also understand as you are also hovering on Menu (parent menu)
I have a menu and a submenu that the parent menu title itself also leads to a page, the submenu opens on mouseover.
My problem is with touch screens, since there is no 'hover' on touch screen, there is no way to access the submenu, since the parent-menu page opens momentarily after the sub-menu appears without leaving time to choose value from it.
So from your experience is there an easy way to adapt the menu to touch-screens?
Is there a simple or conventional way to mimic mouseover on touchscreen?
I am not actually asking for code, but rather what's the common behavior in this scenarios, I already have a website that I want to make touch-screen friendly.
I obviously prefer a CSS solution over a script-based one.
You could have the submenu appear on press, then the user would drag down (still pressing the screen) and on finger up that could select the option.
Alternatively, you can have one click to open the sub menu, then another to select an item.
On a side note, this question would get a better response on https://ux.stackexchange.com/ it deals with user experience related questions
There are several approaches, for a CSS-only solution you could use the :target pseudo class.
.submenu {
display: none;
}
.submenu:target {
display: block;
}
<ul>
<li>
Foo
<ul id="submenu-1" class="submenu">
<li>Bar</li>
<li>Baz</li>
</ul>
</li>
</ul>
I get an unordered list by a cms that I want to style.
It works well, but only for the first <li id="link-18"> element. My goal is it to style the <ul> blocks all the way trough, like the first one. See http://jsfiddle.net/UyrdS/3/ (the second and third link shows the toggled <ul> block not on top)
If the second link (level 2 two) is clicked, the toggled new <ul> block shows beside the navigation, but not on top like the level 1 one links does it with his children element <ul>
You can change your css to generate a nice submenu
nav ul>li>ul {
display: none;
margin-left:2em;
}
See the example on http://jsfiddle.net/WrcMX/
I think this is what you wanted
alllinks = $("ul>li>ul");
$('nav a').on('click', function(e) {
alllinks.hide(); //First hide all the links
e.preventDefault();
if ($(this).parent().children('ul').size() > 0) {
$(this).parent().children('ul').toggle();
}
});
I gave up. I'm a pretty worse inquirer :)
Thanks for the answers. Kudos to you all for spending your time. This fiddle is the closest to my question.
http://jsfiddle.net/UyrdS/6/
But it's not dynamic. It has a static width. That is still the problem.
I have a list with custom image bullets. If the user hovers her mouse over the bullet image, I'd like to either:
display a title attribute, or
display helper text
I can use JavaScript-based solutions, if needed
My source looks like this:
<style>
li.important { list-style-image: url(important.png) }
</style>
<ul>
<li class="important">Test</li>
<li>Test</li>
</ul>
Edit: I want the mouseover/title text to appear only over the bullet, but not over the body of the <li>.
As far as I know, it's not possible to pickup a mouseover of the bullet rather than just the <li> item.
One alternative (which is a bit dirty, but hey) is to include your "bullet" as part of your markup.
<li><img src="important.gif" alt="Something" title="Hey! Useful info!" /> Test</li>
jQuery('li.important').mouseover();
I'm failing to see the problem with the first bullet point you mentioned:
http://jsfiddle.net/xrGqk/2/
Tested setting a title attribute on a custom image LI in Chrome, FF, IE7. Mouse over the image on the LI and the title pops up in all three browsers.
onmouseover seems to work fine as well:
http://jsfiddle.net/xrGqk/4/
You should have an alert when you mouse over the LI custom image bullet.
Give these a try and see if they work for you. If so, consider posting the code that is giving you problems.
I am making a user interface where I want each line to respond with a color effect when rolled over, coloring the entire background of that particular line in a given color. In addition, each line should contain several small symbols (buttons) that also should respond to user clicks and rollovers.
The only way I know to do this using the anchor tag, but once I have used that, I cannot nest another anchor within it. Is there a way to produce "nested buttons" or a workaround (preferrably not including javascript) to accomplish my goal here?
maralbjo
Your CSS file could contain:
li:hover {
background-color: #3f3; /* whatever color you want */
list-style: none;
}
Your HTML file could then just have a list of items:
<ul>
<li><img src="image.png" alt="mybutton"></li>
<li>Line</li>
<li>Goes</li>
<li>Here</li>
</ul>
You cannot make it work in older IE browsers without scripting. :(
I ended up doing what Dmitri Farkov proposed in his comment: adding hover behavior via script. There is an interesting alternative I used for a while, though: whatever:hover.
Maybe it will suit you better.