So basically, I have a tab bar where you have an add button to clone tabs and later edit them. My problem is that once so many tabs are added, my (left and right arrows) and my add button are removed. How can I add tabs, but keep my buttons from disappearing? Fixed position is not an option, I want the buttons next to the newest tab, and once the bar reaches a max-width, the buttons stay there. the arrows are to scroll through the tabs to see one's that will be hidden on overflow. http://jsfiddle.net/pHraC/1/
html
<div class="tabBox" style='max-width:800px'>
<ul class="tabs">
<li class="selected">Certificate of Quantity</li>
<li>COQ - Products/Chemicals</li>
<li>Movement Summary</li>
<li>Barge Survey</li>
<ul class="tabButtons">
<li><-</li>
<li>-></li>
<li><div class="tabNavAdd" title="Add another report form to nomination" style="margin-top:6px">
<input type='button' value='add' class='addTab' /></div></li>
</ul>
</ul>
</div>
jquery
// add new tab
$("input.addTab").live("click", function (event) {
var ultab = $(this).closest('.tabs'); // cache ul.tabs
var li = ultab.children('li:not(.selected)').first(); // cache the row
ultab.children('li:last').after(li.clone().find('a').attr("href", "#").text('New Tab').end());
});
First of all, I would suggest you seperate the .tabButtons form the .tabs
<div class="tabBox" style='max-width:800px'>
<ul class="tabs">
<li class="selected">Certificate of Quantity
</li>
<li>COQ - Products/Chemicals
</li>
<li>Movement Summary
</li>
<li>Barge Survey
</li>
</ul>
<ul class="tabButtons">
<li> <-
</li>
<li>->
</li>
<li>
<div class="tabNavAdd" title="Add another report form to nomination" style="margin-top:6px">
<input type='button' value='add' class='addTab' />
</div>
</li>
</ul>
then, use position:absolute to put them where you like:
.tabBox { position:relative;
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0 50px 0 0;}
.tabButtons {
position:absolute;
top:0px;
right:10px;
z-index:2;
}
You'll also have to define a position other than static to .tabBox for this to work and add some padding for the add button.
Finally, style the .tabs li like this:
.tabBox .tabs li {
display: inline-block;
list-style: none;
margin: 9px 0 0 0;
padding: 3px 1px 0;
height: 36px;
overflow: hidden;
position: relative;
z-index: 1;
}
and add white-space:nowrap; and display:inline-block; to the .tabBox .tabs
here's the result: http://jsfiddle.net/pavloschris/pHraC/4/
most simple way is to offset the top level <ul> with a padding and put the buttons as position absolute.
Here's a quick demo.
http://jsfiddle.net/ionko22/vURkK/
Oh and probably it's better to put your child <ul> within an <li>.
Related
In regards to an earlier question of mine here and the answer here
I posted this new question since this is more Javascript related.
Checkout my fiddle here
I want to create a dropdown menu with CSS flex. I'm struggeling to get the container div to be as wide as the columns. With below code the calculation of the last item in the list to completely left is wrong. It looks like it's calculating the distance to the previous column.
So what I have is
<div class="cats">
<ul>
<li class="item sub">
<a title="Baby" href="http://ministry.webshopapp.com/baby/" class="itemLink">Baby</a>
<div class="subnav">
<ul class="flex-wrap">
<li class="subitem title">
<a title="Borstvoeding" href="#" class="title">something</a>
</li>
<li class="subitem">
<a title="ATTITUDE" href="#" class="subitemLink">ATTITUDE</a>
</li>
<li class="subitem">
<a title="Apple Park" href="#" class="subitemLink">Apple Park</a></li>
<li class="subitem title">
<a title="Borstvoeding" href="#" class="title">something</a>
</li>
<ul>
</div>
</li>
</ul>
</div>
.cats .subnav {
background: #fff none repeat scroll 0 0;
border: 1px solid #eee;
display: none;
margin: 0;
padding: 30px;
position: absolute;
text-align: left;
z-index: 99;
}
.cats .item.sub:hover .subnav {
display: block;
}
.subnav .wrap{
display:inline-flex;
flex-flow : column wrap;
align-content : flex-start;
height : 350px;
background : blue;
}
.subitem{
width : 150px;
height:100px;
background : red;
margin : 20px;
}
$(document).ready(function() {
$('.flex-wrap').each(function(index) {
var lastChild = $(this).children().last();
var newWidth = lastChild.position().left - $(this).position().left + lastChild.outerWidth(true);
$(this).width(newWidth);
});
});
When using it in this way it looks like it's calculating the distance to the previous column. So something like 200px instead of 600px.
Can this be caused by positioning or am I doing something wrong I'am completely overlooking now?
EDITED
The width of all li elements can't be obtained, since they are at display:none;.
I've made something with your Fiddle...
You will be able to continue styling from this.
;)
My jsFiddle is here : https://jsfiddle.net/r1s6651y/1/
I am not able to get Navigation with Numerals to be aligned horizontally.
I have applied display : inline-block for upper ul but still the next menu item begins on the second line.
Any clues ?
It should be stacked as :
1111111 22222222
AAAAAAAAAAAAA
BBBBBBBBBBBBB
You can't have li with width: 100%; and then expect them to align next to eachother. Ofcourse they naturally fall to 2 lines instead of 1, they're inline elements after all (Think of it like this: the <p> tag is also "inline" bu default. When the text in a <p> is too long, the text "breaks" to a new line. As will your li when it is set to be inline). You also want the li to next to eachother, not the ul which is what contains the li. So apply the display: inline-block; to the (correct) li elements
ul#myRow li {
width: auto; //could also be set to 50% if it's just 2 li elements
display: inline-block;
}
Two things. As already noted, you want the li items to be display:inline. You also need to remove the width:100% from the lis of #myRow. Then it will collapse and display inline as long as the container is wide enough for them (otherwise it will wrap).
li {
background: #00945f;
border-bottom: 1px solid #016e39;
clear: both;
float: none;
height: 62px;
margin: 0;
padding: 0 30px 30px;
width: 100%;
}
ul {
list-style-type: none;
}
ul#myRow li {
display:inline-block;
width: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<ul id="myRow" class="row">
<li>
11111111
</li>
<li>
2222222
</li>
</ul>
<ul class="row">
<li>
AAAAAAAAAAAAAAa
</li>
<li>
BBBBBBBBBBBBBBB
</li>
</ul>
</section>
Man, you do some mistakes.
I fixed it at: https://jsfiddle.net/r1s6651y/4/
li {
display: inline-block;
background: #00945f;
border-bottom: 1px solid #016e39;
margin: 0;
padding: 10px 20px;
}
put a class on the li you want horizontal, then add css display: inline
.horiz {
display: inline;
}
<section>
<ul id="myRow" class="row">
<li class="horiz">
11111111
</li>
<li class="horiz">
2222222
</li>
</ul>
<ul class="row">
<li>
AAAAAAAAAAAAAAa
</li>
<li>
BBBBBBBBBBBBBBB
</li>
</ul>
</section>
I am trying to make a menu that has some links in two levels.
What I am trying to do is to make it so that when you click on the top level then level 2 opens.
Right now my problem is that I want to have two columns but I want level two to be one full width column.
See my codepen here: http://codepen.io/mathiasha/pen/KdzmBL
I don't know if it's easiest to make it in CSS or jQuery.
I dont have control of the HTML.
<div class="block block-menu-block">
<ul class="menu">
<li>
1
</li>
<li>
2
<ul class="menu">
<li>2.1</li>
<li>2.2</li>
<li>2.3</li>
<li>2.4</li>
</ul>
</li>
<li>
3
<ul class="menu">
<li>3.1</li>
<li>3.2</li>
<li>3.3</li>
<li>3.4</li>
</ul>
</li>
<li>
4
</li>
<li>
5
</li>
<li>
6
<ul class="menu">
<li>6.1</li>
</ul>
</li>
</ul>
</div>
See the CSS below:
.block-menu-block {
width: 100%;
border: 5px solid red;
overflow: hidden;
}
ul.menu {
list-style-type: none;
padding: 0;
margin: 0;
font-weight: bold;
}
ul.menu li {
display: block;
width: 50%;
border: 1px solid #000;
margin: -1px;
float: left;
text-align: center;
}
ul.menu li a {
display: block;
padding: 20px;
text-decoration: none;
}
li a ~ ul a {
color: green;
}
As long as first level LIs are set to be width:50%, children are bounded. Setting sub-level absolutely positionned could have been a solution, but in your case, it breaks the desired effect.
So a "dirty" solution that I can give you is to use this :
.block-menu-block ul li ul{ width:200%; margin-left:-100%; }
.block-menu-block ul li ul li{ width:100%; background:#fff;}
Sub-level UL width will be multiplied by two, and then has the same width as the menu. Used negative margin to make a translation, otherwise, it will start under the parent LI and will expend out of the menu boundaries.
And finally, reset the sub LIs width to 100% (background is used to hide parent borders).
Updated Codepen
I have this mobile menu:
As you can see, the <li> tags with the image make the bottom expand a little bit, while "Boxing" which doesn't have any image inside the <li> tag doesn't.
I tried "height: 27px" to the <li> tag. worked perfect. the problem is that when clicking the image - a submenu opens inside the <li> - when defining the height it doesn't expand.
This is how the html list item looks like:
<ul class="sports">
<a href="#" >
<li url="http://google.com">NFL
<img src="strokesmenu.jpg" id="sub-menu" />
<ul class="sports2">
<a href="#" class="selected">
<li>Superbowl</li>
</a>
</ul>
</li>
</a>
// one without an image:
<li> Boxing</li>
and this is my css:
.sports li{
list-style-image:none;
list-style-type: none;
border-bottom: 2px solid #eeeeee;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 10px;
width:100%;
font-family: arial;
text-decoration: none;
overflow: hidden;
/*height: 27px;*/
z-index: 100;
}
Give Max-height to the image that way it will not get bigger tha tthe li
li > img{
max-height:100%;
}
i hope it works
i want to Design Menu bar as shown below, i have created whole list in ul but how to set different height ,width for center .Please help i tried code below but middle part is not increasing,
<nav id="Edit_panel">
<ul>
<li class="menubar" title="redo">
<div id="link">redo</div>
</li>
<li class="menubar" title="undo">
<div id="link">undo</div>
</li>
<li class="menubar" title="cut">
<div id="link">Cut</div>
</li>
<li class="menubar" title="copy">
<div id="link">Copy</div>
</li>
<li class="menubar" title="paste">
<div id="link">paste</div>
</li>
<li class="menubar" title="select">
<div id="link">select</div>
</li>
<li class="menubar" title="hand">
<div id="link">hand</div>
</li>
<li class="menubar" title="zoomin">
<div id="link">zoomin</div>
</li>
<li class="menubar" title="zoomout">
<div id="link">zoomout</div>
</li>
<li class="menubar" title="addimage">
<div id="link">Add img</div>
</li>
</ul>
</nav>
css:
#Edit_panel {
background-color: gray;
height:25px;
display: inline;
}
ul
{
background-color: #D8D8D8;
height:30px;
}
li {
display: inline-block;
margin-right: 10px;
margin-left: 10px;
text-align: center
}
Just add another class to elements You want to increase and set diferent height.
And remove duplicated ids.
First of all, you cannot have multiple elements with the same id, so you should change all
id = "link"
to
class = "link"
or delete those id's
Another mistake is putting height to the ul in css. The 30px height of ul means, that you want the whole list to be 30px high. You want to define the height for li elements, not the whole ul.
Instead of:
ul
{
background-color: #D8D8D8;
height:30px;
}
li {
display: inline-block;
margin-right: 10px;
margin-left: 10px;
text-align: center
}
Should be:
ul
{
background-color: #D8D8D8;
}
li {
height:30px;
display: inline-block;
margin-right: 10px;
margin-left: 10px;
text-align: center
}
If you want some elements to have different height or width, you can add some class to them, and define height for the class, for example:
<li class="menubar higher" title="paste">
<div id="link">paste</div>
</li>
And then in CSS you add:
.higher {
height: 50px;
}
Then your elements will be 30px high, and elements witch also have "higher" class, will he higher than others;]
you can give different heights to your elements by jquery. Use this demo for it.
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<style>
.test
{
height:25px;
}
</style>
<script>
$(document).ready(function(e) {
$("li").eq(5).addClass("test"); // In 'eq' 5 is a index of li element and it starts from 0 to n-1
});
</script>