<div id="menu">
<ul><li>SocialSpot</li>
<li>Profile</li>
<li>Latest</li>
<li>Settings</li>
<li>Logout</li>
</div>
</ul>
I have this in a webpage. I have css aligning them. However I want the logout button to be aligned to the right but on the same bar. How can I do this without having them all aligned to the right?
CSS:
ul { overflow:auto; }
li { float:left; }
li:last-child { float:right; }
Live demo: http://jsfiddle.net/simevidas/Rs4Sa/
Btw the :last-child pseudo-class does not work in IE8 (and below). If you want it to work in those browsers, you will have to assign a class (e.g. right) to the Logout LI item, and then:
li.right { float:right; }
Live demo: http://jsfiddle.net/simevidas/Rs4Sa/1/
You might want float: right on the css for the logout link.
Like this? http://jsfiddle.net/QAjkP/
You can use an id tag to specify the css properties for that one <li> item
Related
I want to hide the button ONLY if a specific div (.variable-item-3) has the class "selected".
The class "selected" is added when the li is clicked.
if($('.variable-item-3').hasClass('selected')) {
$('.button').hide();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="variable-item-1">Option 1</li>
<li class="variable-item-2">Option 2</li>
<li class="variable-item-3 selected">Option 3</li>
</ul>
<button type="submit" class="button">Add to cart</button>
You need to perform the test after you change the selected class. You're just running it once when the page is loaded, it won't automatically run again when the class changes.
You can use the .toggle() function with a boolean argument to make the visibility depend on a test.
$("li").click(function() {
$("li").removeClass("selected");
$(this).addClass("selected");
$(".button").toggle(!$('.variable-item-3').hasClass('selected'));
});
li.selected {
background-color: yellow;
}
.button {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="variable-item-1">Option 1</li>
<li class="variable-item-2">Option 2</li>
<li class="variable-item-3 selected">Option 3</li>
</ul>
<button type="submit" class="button">Add to cart</button>
Since you are already using javascript to add the .selected class, it's probably easier to use the javascript solutions suggested in the other answers. However, if you prefer using CSS (I personally prefer using CSS to Javascript whenever possible) and if the div you care about comes before the button you care about then you can actually just use CSS.
.variable-item-3.selected ~ .button {
display: none;
}
This assumes that .button and .selected are siblings. It gets more complicated if the two aren't siblings but it's still possible as long as an ancestor of .button is a sibling of .selected. In that case it would look something like this:
.variable-item-3.selected ~ div .button {
display: none;
}
If the HTML isn't structured so that either of these will work, then you'll need to use one of the other solutions that does it with javascript.
I have tried for months to find away of connecting my menu, but frustratingly I've had no luck. I don't know what else I can try so I want to ask you guys if you can help. I searched around here on Stack for an idea, this someway to describe the function I want but I'd like to utilise the data-attribute way instead of href and I want to use the on click function instead of the hover, as it's for desktop and mobile. I also want to close the submenu with the menu a on desktop version, would toggle be an option?
link: jquery dropdown with separate container
html
<div class="menu">
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</div>
<div class="submenu">
<ul>
<li class="one">content1</li>
<li class="two">content2</li>
<li class="three">content3</li>
</ul>
</div>
content from submenu ul li is set to height:0 that I want to set to auto when triggered, or maybe add a class to the submenu ul li:
.submenu ul li{
display:block;
overflow:hidden;
height:0;
.submenu ul li.active{
height:auto;
}
JS Fiddle
I'm not sure if this is what you want, but try replacing
$(this).attr('data-section').slice(1)
with this
$(this).attr('data-section')
jsfiddle (based in yours)
Just remove the .slice(1). I don't know why you add this one.
when you click on the menu link, jquery will remove active class from list and it will added to a new link related to menu link by data-section.
I have inherited some code which uses horizontal lists in a form:
<ul>
<li>...</li>
<li>...</li>
</ul>
Where <li> is inline-block. I need to populate those lists with ng-repeat:
<ul>
<li ng-repeat="item in items">...</li>
</ul>
To avoid (well-known) gaps between inline-block elements they have to be written either:
<li>...</li><li>
...</li>
Or:
<li>...</li><!--
--><li>...</li>
But I have no idea how to achieve that with ng-repeat!
Anyone? :)
P.S.: I read this. I wonder if there's an elegant "angular specific" solution.
You can manage them by applying css rule:
li{
display: inline-block;
margin-right: -4px;
}
Or, if you don't want to use negative margin, then you can use float: left; instead of inline-block.
However, this would be costlier. Another solution I think is using ng-repeat-start and ng-repeat-end like below:
<ul>
<li ng-repeat="item in items">...</li><!--
<myDir ng-repeat-end>--></myDir>
</ul>
May be you need to use > instead of > and so on.
And with the compile function remove the element so that there would remain just --> using element.unwrap()
I'm not sure the above method would work fine as you're requiring. You could try this once in your project and let me inform.
If we want to muck around with css options...
ul {
font-size:0;
}
li {
display:inline-block;
font-size:12pt;
}
I'm trying to make a menu that opens to the right side of the the div that's clicked to activate it. However, I don't understand how I can do the positioning correctly. I would like the bottom of the last li (where I store the submenu options) to be even with the bottom of the div that activates the popout. However, giving is a negative margin
ul.dd{
z-index:100;
position:relative;
margin-bottom:-30px;
display:none;
}
isn't working out. How can I accomplish this
http://jsfiddle.net/mBPfG/1/
Thanks!
Your container div was preventing the hidden <ul> tag from floating to the right of the other. Also added a negative margin-top to adjust positioning.
I have updated the jsfiddle.
I simply added:
.dd_container { width:600px; }
ul.dd{
z-index:100;
position:relative;
margin-top:-60px;
display:none;
}
However, I would suggest nesting your second <ul> within the first <li>.
I have modified the HTML and CSS completely to have a more symatically correct answer.
<div id="dd_container" class="dd dd_container">
<ul class="dd_deploy">
<li>more options -->
<ul class="dd">
<li>el1</li>
<li>el2</li>
<li>el3</li>
</ul>
</li>
</ul>
<div class="cb"></div>
Less markup is better
View the full jsfiddle.
I have several block a elements that I want to be side-by-side to create a menu. The width of each is set to auto to accommodate the text inside. Each a element is displayed as a table cell and can work with either absolute or relative positioning.
Thanks for any help.
Mike
If you float block elements, they'll be placed in a horizontal row (with dynamic widths unless you specify a fixed one.)
ul#navigation li {
float: left;
}
Have a look at the HTML for the navigation on this page, for example (Questions, Tags, Users, ...)
display:inline-block
This is an almost similar scenario which you can consider using for creating a menu.
I would have gone with display:inline-block for generic side-by-side display but you're trying to do a horizontal nav. I wouldn't use the table cell display as it's quirky and you'll end up having to clean up other bugs.
Html:
#navigation{
width:550px;
margin:0;
padding:0;
list-style-type:none;
overflow:hidden;
}
#navigation li{
float:left;
}
#navigation li a,#navigation li a:hover{
display:block;
padding:4px 21px 4px 20px;
text-decoration:none;
}
<ul id="navigation">
<li >Some link</li>
<li >Some link 2</li>
<li >Some link three</li>
</ul>