So I, like all of you have a menubar (header) on top of my website
and recently found out how to use icons.
Now What I need is a menu wich at first shows ONLY the Icons and when you hover over the text (e.g. HOME, SHOP, etc.) shows up to the right of the icon.
Any way to to this with css?
Thx!
Yes, you can do this with CSS.
Here's an example:
Create a <span> class: <span class="hideBeforeShow"></span>.
<ul>
<li><span class="hideBeforeShow">Test</span></li>
</ul>
Next, make sure you make the class hidden using visibility: hidden;:
li .hideBeforeShow
{
visibility: hidden;
padding-left: 7px;
padding-right: 7px;
}
(padding is added to separate it from the icon)
Next, you'll want to make it show when you hover over the <li></li> element. After you hover over it, you can select it by adding the class name afterwards:
li:hover .hideBeforeShow
{
visibility: visible;
}
Next, you'll want to hide the icon. Set the content to nothing, or hide the image, whatever you want to do.
li:hover:after
{
font-family: none;
content '';
}
You can substitute these 'font-awesome' icons with images instead. The same concept applies.
Here's the jsFiddle example. Play with it.
Related
I am trying to custom my bullets for a list inside a specific < div > tag.
For that I created a class associated with the < div > tag, and in my CSS stylesheet I asked for the bullets that I want inside lists within that tag.
However, the bullets do not appear the way I want them to. The code seems to work, because I can add other cutomisations within the CSS style (make the text of the list bigger for instance), and it works.
I am using Spip for my website; maybe some of you won't be familiar with it: in my website's backoffice, I created a input area named TAKE_WITH_YOU and that's where the list is. Spip converts the list into a valid HTML list (ul and li), but I cannot access this code directly.
Here is my HTML code:
However, despite those changes, the bullets don't change from their default style.
The code seems to work okay, because as I said before, I can change the font-size by changing the CSS, and if I put none in the ul list-style-type, the bullets do dissapear. However, any other value (disc, square, an image, a hex code) brings me back to my original bullets...
.take_it ul {
list-style-type: "\25A1";
/*
I have also tried with:
list-style-image: url(puce-blanche.gif);
And with
list-style-type: "□";
*/
}
.take_it li::before {
content: "\25A1";
/*Also tried with other values as above*/
position: absolute;
left: 0;
}
<BOUCLE_150(MOTS){titre=« 150. take_with_you »}>
#SET{ident_div,#TEXTE*}
#SET{title_div,#DESCRIPTIF}
</BOUCLE_150>
[(#TAKE_WITH_YOU*|oui)
<div id="#GET{ident_div}" class=« take_it »>
<h3>[(#GET{title_div}|textebrut)]</h3>
[(#TAKE_WITH_YOU*|cs_decoupe_compat|propre)]
</div>
]
What am I doing wrong?
Thank you.
You can use list-style:none to customize the list-style. By looking at your code, I assume you are trying to use :before pseudo class to display the custom list style.
ul {
list-style: none;
position: relative;
padding: 0;
margin:0;
}
li {
margin-left: 20px;
}
li:before {
content: "\25A1";
position: absolute;
left: 0;
}
<ul>
<li>Take this</li>
<li>Take this one too</li>
<li>Take this one last time</li>
</ul>
I would like to show text when the mouse hovers over a button or <a> tag.
For example, I have this button with some text:
I have managed to make it larger when the mouse hovers over the button:
What I would like to do instead is keep the text and image on top and display some text beneath the button. Can anyone suggest how I might do this?
Not sure if thats what you are looking for since you didn't include your code...
div {
display: none;
margin-left: 10px;
}
a:hover+div {
display: block;
}
<a><img src='http://vignette1.wikia.nocookie.net/planetside2/images/4/4d/Scythe_Side_View_Icon.png/revision/latest?cb=20130426065845'></a>
<div>Display Whatever</div>
Add hover state to parent element and styles to child
.parent .child {display: none}
.parent:hover .child {display: block}
Remember to put text you want to show in front of picture (posistion: absolute or/and z-index manipulation)
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.
When I mouse over a list element, the transition occurs correctly, however when I mouse over (hover over) a list element with a link the text will not transition until I specifically mouse over the text itself.
Here's a GIF of the problem(sorry for the lack of a cursor -- 'Home' is a link within a list and 'example1' is merely a list):
It strikes me I may be a bit vague here. Here it is uploaded in its current form - the CSS responsible for that navbar is within the /* dropdown */ boxes.
The source in its entirety is all there on that webpage if you inspect element. (I tried putting it here but the code tag is refusing to work.)
This is because you have space between your li and your a tag. You need to apply all styling in your submenu to the a tag, not to the li.
So, instead of having
li {
padding:5px
}
have
li a {
padding: 5px
}
do something similar with your hover. Attach the hover class to the a, not the li.
Edit:
alternatively, specify the :hover { color :#fff; } to the li (it is currently on the a.
It's often good to have your anchor elements occupy the complete space of the menu item. This serves two purposes:
It can react to events anywhere in the area.
Users don't have to "hunt" to find the clickable/touchable region.
Specifically, I'd suggest setting the display of your anchors to block or inline-block, and padding them (not the containing <li> elements).
Here's a simple example: http://jsfiddle.net/zzjZY/3/
CSS
LI {
width: 200px;
border: 1px solid red;
}
A {
display: block;
padding: 8px;
}
A:hover {
-webkit-transition:color 300ms ease-in-out;
-moz-transition:color 300ms ease-in-out;
color:#fff;
background-color:#060;
}
HTML
<ul>
<li>a little text</li>
<li>a little text</li>
<li>a little text</li>
</ul>
You will see that the :hover formatting is applied anywhere inside the containing element, because the anchor fills it completely. The link is also clickable anywhere inside the containing list item.
Our designer created a navigation that visually looks like this:
Navigation Bar
The HTML structure of which is:
<ul>
<li class="first">Home</li>
<li>Schools</li>
<li>Scores</li>
<li>Sports</li>
<li>Blogs</li>
<li>Podcasts</li>
<li class="last">Forums</li>
</ul>
I can't figure out if there's a way to make this so that when I mouse-over, let's say 'Sports', that both the left and right arrow image would change colors to the darker red. Is there a way to do this?
This is my CSS so far, but it only changes the arrow right of the link:
#mainNav ul li{
float: left;
background-color: #ed1c24;
padding: 7px;
padding-right: 21px;
background-image: url('/images/red_arrow.png');
background-repeat: no-repeat;
background-position: right;
}
#mainNav ul li.first{
padding-left: 14px;
}
#mainNav ul li a{
text-decoration: none;
color: #FFF;
}
#mainNav ul li:hover{
background-color: #d5171f;
background-image: url('/images/red_arrow2.gif');
}
You'll want something like this: http://jsfiddle.net/2xXQC/
Notice specifically the negative margin-left on each list item that causes them to overlap. The image you will need is something like this:
_____
\ \
/____/
Note to self: Seriously brush up on ASCII art skillz
Except the first. Do note however which anchor gets selected when the cursor hovers. HTML elements are always rectangular, so there's no way you can get the hit area to form the shape of the arrow.
Just make the hover image have both arrows in one image, then position it so it covers both arrows.
I'd be willing to bet that the background image for each list item only has a right arrow.
Using Css, you're only affecting the background image that you're actually hovering over.
If you use javascript (or jquery) for this (onHover), you'll have access to an onHover "event", within which you'll be able to affect anything else on the page, not just the image you're hovering over. In that case, you'll be wanting to swap the image you're hovering over, as well as the one to the left of it.
If your red_arrow.png and red_arrow2.gif have both arrows you may be able to mess around with z-index, but it's going to require a lot tweaking to get everything lined up properly.
You are probably better of using a css sprite and fine tuning the hover position in css.
Check link text for some good tutorials and ideas.
You don't have to use javascript. CSS Sprites get the job done for mouseovers. Here is a good article:
http://www.dave-woods.co.uk/index.php/mouseover-images-using-css-sprites/
Here is that technique in action:
http://www.rackspace.com/apps
EDIT: I see the problem. You need to do BOTH arrows. But you can still do this with CSS, just increase the z-index for the hover states (You'll need to have your sprite include both the left and right arrows):
a:hover {
background-position: 0 40px;
z-index: 10;
}