What I need are menu items where you have left aligned item text and right aligned keyboard shortcuts in the same menu item, like in classical menus of any computer programm.
html example :
<nav>
<ul>
<li>Menu 1
<ul>
<li><a href="#" >menu item 1 ... ⌃⌥ B</a></li>
<li><a href="#" >menu item 2 </a></li>
<li><a href="#" >menu item 3 </a></li>
</ul>
</li>
<li>Menu 2 </li>
</ul>
</nav>
Can I place in the <li> tag two <a> tags one for left and one for right aligned text like this ?
<li> menu item 1 ... <a>⌃⌥ B</a> </li>
How to achieve this with CSS ?
here i tried to solve your example code here and i do following it's working
Note: if your structure would be same as you have given then you may
go for it or you can refer this
.submenu{
display:block;
width:160px;
}
ul.submenu li{
background-color:green;
width:inherit;
}
ul.submenu li a:nth-child(odd){
background-color:grey;
}
ul.submenu li a:nth-child(even){
clear: right;
background-color: red;
float: right;
}
<nav>
<ul>
<li>Menu 1
<ul class="submenu">
<li> menu item 1 ... <a>⌃⌥ B</a></li>
<li><a href="#" >menu item 2 </a> <a>⌃⌥ C</a> </li>
<li><a href="#" >menu item 3 </a> <a>⌃⌥ D</a> </li>
</ul>
</li>
<li>Menu 2 </li>
</ul>
</nav>
My DEmo
You can't do that in only one particular tag. You should first define a fixed width for the parent tag and then algin them accordingly
See this here: https://jsfiddle.net/5a6nnvxo/
I.e. you could try to achieve your goal by using the
float: right;
command.
You can use CSS tag float to do this. Here is the fiddle
Here is how I would do it. Just put in the icon (be it image or text or whatever) in a <span></span>
NOTE You don't have to use span, a div with an ID or Class works just as well
The width of the li is just there to give a fixed size.
span {
float: right;
}
li {
width: 200px;
}
<nav>
<ul>
<li>Menu 1
<ul>
<li><a href="#" >menu item 1 ... <span>⌃⌥ B</span></a></li>
<li><a href="#" >menu item 2 </a></li>
<li><a href="#" >menu item 3 </a></li>
</ul>
</li>
<li>Menu 2 </li>
</ul>
</nav>
Related
I want to separate the screen into three columns using a ul tag, and I want to have a normal (vertical) list inside the first column. I tried this but it does not work:
<ul id="content_seperator">
<li class="content_left">
<ul id="vertical-nav">
<li>Menu1</li>
<li> Menu2 </li>
<li> Menu3 </li>
<li> Menu4 </li>
<li> Menu5 </li>
</ul>
</li>
<li class="content_middle"></li>
<li class="content_right"></li>
</ul>
Try the following code. I hope it helps.
#content_seperator,
.content_left,
.content_middle,
.content_right {
display: flex;
}
.content_left,
.content_middle,
.content_right {
flex: 1 1 0
}
<ul id="content_seperator">
<li class="content_left">
<ul id="vertical-nav">
<li>Menu1</li>
<li> Menu2 </li>
<li> Menu3 </li>
<li> Menu4 </li>
<li> Menu5 </li>
</ul>
</li>
<li class="content_middle">Middle</li>
<li class="content_right">Right</li>
</ul>
you may use,
#content_seperator{
display: block;
}
#content_seperator li{
display: inline-block;
vertical-align: top;
}
#content_seperator li ul li{
display: block;
}
you can give width for 'li' by using class.
Hi I have created a navigation bar and I want to place a home image icon at the start of the navigation. However when I try to it either moves the other items down or when I hover over the icon the hover doesn't work properly.
<div id="nav">
<div id="nav_wrapper">
<ul>
<li class="icon-home"></li>
<li id="et"> England
<ul>
<li>Premiership
</li>
<li>Championship
</li>
<li>League 1
</li>
<li>League 2
</li>
</ul>
</li>
<li id="et"> France
<ul>
<li>Ligue 1
</li>
</ul>
</li>
<li id="et"> Germany
<ul>
<li>Bundesliga
</li>
</ul>
</li>
<li id="et"> Italy
<ul>
<li>Serie A
</li>
</ul>
</li>
<li id="et"> Spain
<ul>
<li>La Liga
</li>
</ul>
</li>
</ul>
</div>
<!-- Nav wrapper end -->
</div>
In the link below I managed to get the heading in line however the hover effect doesn't work. http://jsfiddle.net/mxohL7kL/
The home link has no text in it, that is why your hover effect is not the same height as the other link. What you could do is, gives the home anchor a text and hide it.
<!-- HTML -->
<li class="icon-home"><span>Home</span></li>
//css
.icon-home a span {
visibility:hidden;
}
see the example here
I am working on making a collapsible element
I want to access
<div id="class1">
<ul>
<li> <a href="#" >link 1</a></li>
<li> <a href="#" >link 2</a></li>
<ul class="submenu">
<li> <a href="#" >link 1-1</a></li>
<li> <a href="#" >link 1-2</a></li>
</ul>
</ul>
I want to change the color of linki 1-1 when the link 2 is active or hide it when the link 2 is inactive.
Hope I am being clear here.
Just created a rough mockup for achieving the desired result. Please note there are many ways of achieving and this is only a way
$("#drop").click(function() {
$(".item").toggle("active")
})
.active {
display: block;
}
.item {
display: none
}
.item a {
text-decoration:none;
color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="class1">
<ul>
<li> link 1
</li>
<li> link 2
<ul class="submenu">
<li class="item"> link 1-1
</li>
<li> link 1-2
</li>
</ul>
</li>
</ul>
I am trying to have my Share dropdown submenu content right aligned, not below Share
Here is my code:
<a href="#" data-dropdown="drop1" data-options="is_hover:true" >More</a>
<ul id="drop1" class="f-dropdown" data-dropdown-content>
<li>Infos</li>
<li class="has-dropdown" >Share
<ul class="dropdown" >
<li>This is a link</li>
<li>This is another</li>
<li>Yet another</li>
</ul>
</li>
<li>Third option</li>
</ul>
with custom css added to the original foundation one:
.has-dropdown ul{display:none;}
.has-dropdown:hover ul{display:block;}
The problem is that I cannot access Third option link, so I would like to have the This i a link, This another, Yet another submenu not below Share but just on the right...
As I found in the docs, I tried to add some data-options="align:right" like this:
<li class="has-dropdown" ><a data-options="align:right" href="#">Share</a>
... with no success... :(
EDIT1
With Sai Ram Sudheer answer, I have:
Not really better..
one way of doing is by aligning text in ul to right
.has-dropdown ul{display:none;}
.has-dropdown:hover ul{display:block;text-align:right;}
or you can use class right over li elements
<a href="#" data-dropdown="drop1" data-options="is_hover:true" >More</a>
<ul id="drop1" class="f-dropdown" data-dropdown-content>
<li>Infos</li>
<li class="has-dropdown" >Share
<ul class="dropdown" >
<li class="right">This is a link</li>
<li class="right">This is another</li>
<li class="right">Yet another</li>
</ul>
</li>
<li>Third option</li>
</ul>
oops i didn't get the question before.
I tried with data-options="align:left" but unable to get it to the right of main menu.
Check the navigation in this link that i did a while back .I used jquery and some css to get it.
I have a list as follows:
<ul id="menu">
<li>Home</li>
<li>Work
<ul>
<li>CSS Development</li>
<li>Graphic Design</li>
<li>Development Tools</li>
<li>Web Design</li>
</ul>
</li>
<li>About</li>
<li>Contact Us</li>
<li>Feedback</li>
</ul>
I am attaching an image of so far what I have done.
In this menu, I want to align feedback to the right side.
How can I do it?
Add this to your CSS content.
li:last-child will select the last li of the menu list.
Demo
#menu > li:last-child
{
float:right;
}
Just use float: right;:
<ul id="menu">
<li>Home</li>
<li>Work
<ul>
<li>CSS Development</li>
<li>Graphic Design</li>
<li>Development Tools</li>
<li>Web Design</li>
</ul>
</li>
<li>About</li>
<li>Contact Us</li>
<li style="float: right;">Feedback</li>
</ul>
You can check the demo here.
Aside from float you can also use position:absolute inside of a position:relative container. (Inline CSS for example purposes only.)
<ul id="menu" style="position:relative;width:1008px;height:40px;display:block;">
<li class="right" style="position:absolute;right:20px;">
Feedback</li>
I had the same question but for the whole list.
Float does not realy work there, so here is what worked for me:
ul{
direction:rtl;
}
This way all your li elements including their ::marker's will be pulled to the right of the parent container.
You can also combine this with selectors to just move single li elements.
ul:first-child,
ul:nth-child(2),
ul:last-child{
direction:rtl;
}
This will pull the entire menu to the right and have the dropdown sub menu pull right also instead of displaying off the screen.
<div class="top-menu">
<ul class="nav navbar-nav pull-right"><li class="dropdown dropdown-user">
<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
<i class="icon-settings"></i>
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu pull-right">
<li>
<a href="page_user_profile_1.html">
<i class="icon-user"></i> My Profile
</a>
</li>
</ul>
</li>
</ul>
</div>