I am curious, how to change the code that drop-down opens and closes only by clicking on the link. Because now it also closes and opens if you click on the body of the drop-down itself.
$(document).ready(function(){
$( "ul" ).click(function() {
$(this).children('li:not(.init)').slideToggle(0);
$(this).find("li.init").toggleClass("init1");
});
});
.selectContainer ul{
width:200px;
}
.selectContainer ul li
{
border:1px solid green;
width:100%;
cursor:pointer;
list-style: none;
}
.selectContainer ul li:not(.init){
display:none;
float:left;
}
li.init{position:relative;}
li.init:after{content:"\2193 ";position:absolute;right:5px;}
li.init1:after{content:"\2191 ";position:absolute;right:0;}
<div class="selectContainer">
<ul>
<li class="init">Select</li>
<li data-value="value 1">Option 1</li>
<li data-value="value 2">Option 2</li>
</ul>
</div>
You can try:
$( "ul li.init" ).click(function(e) {
$('li:not(.init)').slideToggle(0);
$(this).toggleClass("init1");
});
You query the "ul"-element with $( "ul" ) and define it's click. Obviously all the space after it is part of the ul-element.
Why don't you try to set the $("li.init").click instead. Inside the function you could query for the "ul" just as in your example. But set the .click of the "li".
Related
I want to vertical align the logo image to the bottom of the my navigation menu. I've tried vertical-align:text-bottom, but the vertical-align doesn't seem to work for me, because the ul not works like the normal p tag.
Anybody who can help me?
<a href="index.php">
<img id="logo" alt="logo" src="http://dyrholmkantinedrift.dk/img/kantinedrift_logo01.png" height="50">
</a>
<ul id="nav">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
<li>Pellentesque</li>
<li>Aliquam</li>
<li>Morbi</li>
</ul>
The css:
header img {
float:left;
position:absolute;
}
ul {
height:50px;
position:relative;
}
ul li {
display:inline-block;
bottom:0;
}
Check this fiddle:
http://jsfiddle.net/Nh6NZ/
The key is you need to use display:inline-block instead of floating if you want to vertical-align those elements.and Also float and position absolute can't be used together.
In my ol below, i want the first li to hide its number, and then the second li to start at 1. Is this possible?
Heading Herewith no number - so hide the 1.
so this li would be number 1.
this would be number 2.
etc
etc
Another Option (See http://jsfiddle.net/ECjLs/)
HTML
<ol class="my-awesome-counter">
<li>Hello</li>
<li value="1">Hello</li>
<li>Hello</li>
<li>Hello</li>
</ol>
CSS
li:first-child {
list-style:none;
}
You can hide the number using CSS and use the "value" attribute to set the ordinal value of an entry and any subsequent entry.
<ol>
<li style="font-weight: bold; list-style-type:none">Heading Herewith no number - so hide the 1.</li>
<li value="1">so this li would be number 1.</li>
<li>this would be number 2.</li>
<li>etc</li>
<li>etc</li>
</ol>
you could try css counters: http://jsfiddle.net/QKgMq/
html:
<ul>
<li>first</li>
<li>true first</li>
<li>second</li>
</ul>
css:
ul>li:nth-child(2) {
counter-reset: term;
}
li{
list-style-type: none;
}
li:first-child:before{
content:'';
}
li:before {
counter-increment: term;
content: counter(term);
margin-left: -10px;
margin-right: 10px;
}
Html:
Item one
Item two
Item three
Item four
simply using css you can do the following to hide the first number from the ol list:
CSS:
ol li:first-child {
list-style:none;
}
Result :
Item One
2 Item two
3 Item three
4 Item four
I want to add a drop down menu in "about us" tab in main menu, I tried hard but its not showing,
Here is the html code for the lists,
<li>
About Us
<ul class="sub-menu">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</li>
and here is my css for the drop down menu I have created:
#menu ul li{float:none}
#menu ul li a{background:none !important;}
#menu ul li a:hover{background:url(../images/menu_active.gif) top repeat-x !important;display:block}
#menu ul{border:solid 1px #FC0;position: absolute;z-index: 100;background: #000;width:300px;display:none}
In this fiddle is a working version of your code:
Jsfiddle
Explanation:
You are not selecting the write <ul> in your css
#menu ul li:hover ul{background:url(../images/menu_active.gif) top repeat-x !important;display:block;}
#menu ul li ul{border:solid 1px #FC0;z-index:999;background: #000;width:300px;display:none;}
Check for the full code the JSFiddle
If you want to select a <li> of a <ul> in a <ul>or<li> Use this in your css.
ul li ul li {}
This is an example for dropdown in pure css.
.sub-menu { display: none; }
.menu:hover + .sub-menu { display: block; }
http://jsfiddle.net/greatghoul/TDA62/
Ran across an odd issue today. I've been working with a floated menu that works on everything I've tested thus far (not gotten to old IE versions yet...), except firefox. The page renders correctly when first loaded, but if the window is resized, elements with deterministic layouts (i.e. inline elements, divs with overflow:hidden, etc) affected by the floated element fail to update.
Anyone have a (preferably javascript free) workaround?
HTML:
<div id="leftBar">
<a>test1</a>
<a>test2</a>
</div>
<div id="bodyContent">
<div>
<div id="contenta">
Hello world!
</div>
</div>
<div>
<p>Paragraph test</p>
</div>
<div style="clear:both">
Enclosing div.
</div>
</div>
CSS:
#leftBar {
float:left;
width:50px;
background:red;
height:75px;
}
#bodyContent {
margin:0 auto;
width:500px;
background:green;
}
#bodyContent > div {
overflow: hidden;
}
#contenta {
width:100%;
height:50px;
background:blue;
}
jsfiddle here.
I'm not sure if this is what you're trying to achieve or not, but I would personally use a container for the elements.
#container {
width: 550px;
}
#leftBar {
float:left;
width:50px;
background:red;
height:75px;
}
#bodyContent {
margin:0 auto;
width:500px;
background:green;
overflow: hidden;
}
#contenta {
width:100%;
height:50px;
background:blue;
}
Then wrap your content in the container.
Hello i am developing a web site.... its my second one, and i am trying to center a ul inside a div
i want to place icons in anchor tags and use background positioning for sprite use.... the thing is how can i set to center the ul inside the div or inside the ul ...
example of my code here:
http://jsfiddle.net/kowen/wAdf3/1/
here is the code: (html)
<div id="container">
<ul>
<li><a class="fbicon" href="#">hola 1</a>
</li>
<li><a class="twttricon" href="#">hola 2</a>
</li>
<li><a class="sndcloudicon" href="#">hola 3</a>
</li>
<li><a class="emailicon" href="#">hola 4</a>
</li>
</ul>
and css:
#container {
width: 400px;
height:400px;
text-align: center;
background-color:gray;
}
#container ul {
display: inline-block;
}
#container li {
/* float: left;*/
height: 33px;
line-height: 30px;
text-indent:-999em;
}
#container li a {
width:32px;
height:32px;
background-image:url(http://www.testcloud.com.ar/social-icons.png);
}
a.fbicon {
background-position:-5px center;
}
a.twttricon {
background-position:-42px center;
}
a.sndcloudicon {
background-position:-111px center;
}
a.emailicon {
background-position:-148px center;
}
i have tried a few recipes but no clue how can i do that....
how can i get the a displayed as a block so it can be shown the full icon on screen???
thanks in advance for your help.
Salutations