I have a menu I created that I would like to appear on hover over of an image. How do I write the css to create that? This is my menu:
<ul id="options" class="optionsMenu">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E
<ul>
<li>E1</li>
<li>E2</li>
<li>E3</li>
<li>E4</li>
</ul>
</li>
<li>F</li>
<li>G</li>
</ul>
I would like it to stay hidden and only appear when I hover over the following image:
<img src='...image.png' alt='Options Menu' id="optionsMenuTree"/>
I think I need to do something like this:
#options ul.optionsMenu ul{
display: none;
visibility: none;
}
#optionsMenuTree:hover > ul {
display: block;
}
But I cannot get it to work right. Any help?
As long as optionsMenuTree and options are siblings, you don't need javascript and can use
#options {
display: none;
}
#optionsMenuTree:hover ~ #options {
display: block;
}
See updated JSFiddle
CSS
#options{
display: none;
}
#optionsMenuTree:hover + #options {
display: block;
}
Check this : http://jsfiddle.net/AliBassam/S9cdE/
However, when you remove the mouse of the image, the list will be hidden again, to keep it there, I think you need to use Javascript/JQuery.
JQuery
$("#optionsMenuTree").hover(function(){
$("#options").show();
}, function(){
$("#options").hide();
});
Javascript
<img onmouseover="ShowList()" onmouseout="HideList()"/>
Then:
function ShowList()
{
document.getElementById("options").style.display="block";
}
function HideList()
{
document.getElementById("options").style.display="none";
}
first you have to hide the submenu listitems.
then have to show on hover or main link..
ul#options ul {display: none;} ul#options ul li:hover > ul { display: block; }
Related
when in mobile view my css responsive menu for mobile, will show the submenu when you click on the link, but how do change the link, to something like 'Close X' as the list is long, and if you back on the link it doesn't close, unless you click a different link.
I've managed to create a separate close link. But this now means I've got two links. I want 1 link which will open, then change to the a close link when the submenu is open and when you click on that it will close.
Thanks
css
nav li ul {
display:none;
}
# open
nav ul li a:hover + .hidden, .hidden:hover {
display: block;
position:absolute;
opacity:1.0;
background-color: #343434;
padding:0.5em;
}
# close
nav ul li #close:hover + .hidden, .hidden:hover {
display: none;
position:absolute;
opacity:1.0;
background-color: #343434;
padding:0.5em;
}
menu
<ul>
<li><span id="close">Close X don't show till city clicked</span>
Cities ￬ remove and replace with close or up arrow
<ul class=hidden>
<li>London</li>
<li>New York</li>
<li>Rome</li>
</ul>
</li>
</ul>
This works as you are hoping I believe, The majority of the function is via CSS to keep jquery to a minimum.
CSS Selectors
> selector for immediate children
~ selector for all siblings of the preceding element
Let me know if this isn't what you were hoping for.
Demo
// Add click event to collapse anchor
$("li > a.collapse").click( function() {
// Remove .expand class from parent
$(this).parent().removeClass("expand");
});
// Add click event to expand anchor
$("li > a.expand").click( function() {
// Add .expand class to parent
$(this).parent().addClass("expand");
});
li > a.collapse, li.expand > a.expand {
display: none;
}
li.expand > a.collapse {
display: inherit;
}
li > a.expand ~ ul {
display: none;
}
li.expand > a.expand ~ ul {
display: inherit;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>
<a class="collapse">Close</a>
<a class="expand">Cities</a>
<ul>
<li>London</li>
<li>New York</li>
<li>Rome</li>
</ul>
</li>
</ul>
I have this html code
<ul id="list-table">
<li>
<table id="test-tab">...</table>
<ul id="panel-table">...</ul>
</li>
</ul>
I want table "test-tab" and ul "panel-table" inside li display horizontal like this http://img.photobucket.com/albums/v246/TuanVenus/table-css.png
I'd suggest using float: left. Normally, I'd go with display: inline-block but that might break the table layout. Don't forget to add a pseudo-element which provides the clear-fix for the parent element (<li>).
#test-tab, #panel-table {
float: left;
}
#list-table li::after {
content: "";
display: block;
clear: both;
}
Give float to your elements like this:
CSS
.fleft { float:left;}
HTML
<table id="test-tab" class="fleft">...</table>
<ul id="panel-table" class="fleft">...</ul>
Just add the same styles to your CSS as in http://jsfiddle.net/vMe5L/38/ Enjoy !!
you could use display and wrap your table in a div, so it doesn't get broken:
http://codepen.io/anon/pen/tjesx/
#list-table {
display:table;
width:600px;
border:solid;
border-spacing:1em;
padding:0;
}
#list-table > li {
display:table-row;
}
#list-table > li > ul ,
#list-table > li > div
{
display:table-cell;
border:solid;
margin:0;
}
try this,
<style>
#test-tab{
float:left;
}
#panel-table{
float:left;
}
</style>
<ul id="list-table">
<li>
<table id="test-tab"><tr><td>example table</td></tr></table>
<ul id="panel-table"><li>example li</li></ul>
</li>
</ul>
Try add a css style
<ul id="list-table" style="list-style: none;">
I want to know how to accomplish something similar to this in wordpress. Any suggestions? maybe a sample code.
Can you show me an example how to apply it to the sub bullets?
You could use li:before{ content:"....";} to make an arrow? Like this:
<ul>
<li>Disaster</li>
<ul>
<li>stuff</li>
<li>Stuff2</li>
</ul>
</ul>
CSS:
ul ul li:before {
content: "\2192 \0020";
}
ul ul {
list-style: none;
}
See it in function here, on this fiddle: http://jsfiddle.net/f9AzK/
Yup. Use CSS, list-style-image.
http://www.w3schools.com/cssref/pr_list-style-image.asp
Use li:before { content: ...; }
HTML
<ul>
<li>Disater Assistance Center Manager
<ul id="sub">
<li>San Jaun</li>
</ul>
</li>
</ul>
CSS
#sub { list-style:none; }
#sub li:before {
content: "\2192 \0020";
}
JSFiddle
Other special characters can be found here.
My HTML structure is as per the following:
<nav class="main-nav">
<ul>
<li class="gallery-collection">
Welcome <!-- Hide this -->
</li>
<li class="page-collection">
About
</li>
<li class="gallery-collection">
Support
</li>
...
How do I hide the first element saying "Welcome" using CSS? Note that 2 elements have the same class here: 'gallery-collection'.
Max compatibility:
.main-nav li {
display: none;
}
.main-nav li + li {
display: list-item;
}
Less compatibility, but not too bad:
.main-nav ul li:first-child {
display: none;
}
With CSS only (as your question was only tagged css):
.main-nav li:first-of-type
{
display:none;
}
The :first-of-type selector is supported in all major browsers, except IE8 and earlier.
I have a block of HTML:
<ul>
<li>a</li>
<li>b</li>
<li class="nav">c</li>
<li class="nav">d</li>
</ul>
and a CSS ruleset:
ul li {
display: inline;
}
li.nav {
float: right;
}
which are not behaving to my intentions: I want it displayed like so:
ab cd
but instead it's
ab dc
the difference being the displayed order of elements. How do I have the list items of class "nav" be displayed in their syntactical order?
Well, the obvious quick fix is to just reverse the order of the elements in the list:
<ul>
<li>a</li>
<li>b</li>
<li class="nav">d</li>
<li class="nav">c</li>
</ul>
I'm guessing what happens is that whenever the rendering engine encounters an element with float:right it pushes that element as far to the right as possible. So it first encounters the "c" and pushes that all the way over to the right, then it encounters the "d" and pushes that as far right as possible - but the "c" is already occupying the rightmost spot, so "d" stays to its left. Essentially, the elements are laid out in right-to-left order rather than left-to-right order.
Another option, I think, would be to divide the elements into two lists and just apply the float: right style to the second list as a whole (i.e. to the <ul> element).
<ul>
<li>a</li>
<li>b</li>
</ul>
<ul class="nav">
<li>c</li>
<li>d</li>
</ul>
and
ul li {
display: inline;
}
ul.nav {
float: right;
}
That way the list itself would float to the right margin but the order of the elements in it wouldn't be reversed.
I fixed this issue by separating the list into two and floating them to their respective positions. I wrapped the two lists with a div and applied overflow: auto to it. My final CSS code looked like this:
ul li {
display: inline
}
div.post-info-wrap {
overflow: auto
}
ul.post-info {
float: left
}
ul.nav {
float: right
}
and my markup like:
<div class="post-info-wrap">
<ul class="post-info">
<li/>
</ul>
<ul class="nav">
<li/>
</ul>
</div>
If you want c & d to be displayed in a block at the right, you'll have to put them inside one block element, not setting the float attribute on both.
I don't think that list elements like <li> are the right choice for your intention. You don't want to display a single list, so you may try using two lists (where one of them has the float attribute) or just simple <div> elements.
So actually you want a nav list and some other list? Why not use 2 lists?
<ul class="other">
<li>a</li>
<li>b</li>
</ul>
<ul class="nav">
<li>c</li>
<li>d</li>
</ul>
And css:
ul li {
display: inline;
}
.other{
float:left;
}
.nav {
float: right;
}
Float the ul where you want the content/container situated and float the li in the order you want it displayed.
<div id="myblock">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
CSS
#myblock ul {
display:inline;
float:right;
}
#myblock li {
float:left;
}
The opposite (float to the left but in reverse order)
#myblock ul {
display:inline;
float:left;
}
#myblock li {
float:right;
}
Try this:
ul {
text-align: right;
}
ul li {
display: inline;
}
ul li.default {
float: left;
}
li.nav {
float: auto;
}
<ul>
<li class="default">a</li>
<li class="default">b</li>
<li class="nav">c</li>
<li class="nav">d</li>
</ul>