I'm using a templating engine, so that I have to have a div(or some marker) inside of a Bootstrap 3 dropdown.
When I do this, the formatting goes out of whack:
jsfiddle
Here's my sample code:
<div class="row">
<div class="col-lg-2">
<h1> Dropdown Test</h1>
<button data-toggle="dropdown">Dropdown</button>
<ul class="dropdown-menu" role="menu">
<li><a>test</a>
</li>
<li><a>test2</a>
</li>
<div>
<li><a>test3</a>
</li>
</div>
</ul>
</div>
</div>
JSFIDDLE
Bootstrap dropdown menus are specific when setting the CSS:
.dropdown-menu > li > a {
clear: both;
color: #333;
display: block;
font-weight: normal;
line-height: 1.42857;
padding: 3px 20px;
white-space: nowrap;
}
If you deviate from the ul-li-a order, you'll need to include additional CSS rules. This is why SASS/LESS are good; they make it easy to extend CSS rules to other elements/classes without too much extra markup; however, I won't demonstrate SASS or LESS at this time, just take a look at the CSS you could include in your page, below:
I'
/* notice the missing '>' before the 'a' */
.dropdown-menu > li a {
clear: both;
color: #333;
display: block;
font-weight: normal;
line-height: 1.42857;
padding: 3px 20px;
white-space: nowrap;
}
/* change colors, remove underline and turn on pointer */
.dropdown-menu > li a:hover, .dropdown-menu > li a:focus {
background-color: #f5f5f5;
color: #262626;
cursor: pointer;
text-decoration: none;
}
Your HTML also wasn't valid and didn't adhere to the Bootstrap setup. To update your markup, you'd need to include a .container and .btn-group. Additionally, the div was at the same level as the li, which was not preferred/allowed. Finally, I've added a dropdown arrow for UX styling.
<div class="container">
<div class="row">
<div class="col-lg-2">
<h1>Dropdown Test</h1>
<div class="btn-group">
<button type="button"
class="btn btn-default dropdown-toggle"
data-toggle="dropdown"
aria-haspopup="true"
>Dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a>test</a></li>
<li><a>test2</a></li>
<li>
<div><a>test3</a></div>
</li>
</ul>
</div>
</div>
</div>
</div>
There's a caveat, the above is an example and may not be advised to use in production. You are applying the CSS to all links nested in dropdown-menu li. If you have several levels of nesting, that style will apply to all those links; for that reason, consider modifying the CSS selector, perhaps use a class on your anchor links.
So I'm going to expand on my comment as well as what belinus was saying. I still don't think this is the best way to do it, but may be a temporary solution at least. I would put it in a ul (instead of the div) as belinus was saying, however I don't think a ul can be a child of another ul without being stuck inside of another li (see this post about that), so here's what I think it would look like:
<ul class="dropdown-menu" role="menu">
<li><a>test</a></li>
<li><a>test2</a></li>
<li>
<ul id="test">
<li><a>test3</a></li>
</ul>
</li>
</ul>
And then you could just add some css to that ul. In your fiddle I just added 20px and it looked lined up to me:
#test {
padding-left: 20px;
}
Hopefully this helps a little bit.
The proper way to do it looks like this:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3
<ul>
<li>Sub-Item 1</li>
<li>Sub-Item 2</li>
</ul>
</li>
</ul>
You cannot have a <div> directly inside <ul>. This makes the HTML invalid and it produces erratic results in different browsers. So, you need to edit the template to render it inside a particular <li> and add stuff inside it.
Related
In my case I have menu like this:
<li class="">
Accounts</i>
<ul style="display: none;">
<li class="">Profile</li>
<li class="">Edit </li>
</ul>
</li>
How to add style display block if anchor tag is active?
First of all remove the "i" element closing tag from your "Accounts" link. After that You should not use inline styling when you are changing display value, instead use separate css file. I would move the display : none from inline to separate css file using selector.
ul {
display: none;
}
// use this if you want to hover
a:hover + ul {
display: block;
}
// use this if you want to click
a:focus + ul {
display: block;
}
It is fairly simple to modify the display property of the parent element based upon some property of a child element using Javascript but in this case I'm not sure how the hyperlink will be assigned the active class when it resides within a hidden element (ul)...
const getparent=(n,e)=>{//utility to find ancestor node of particular type
while( n!=document.querySelector(e) )n=n.parentNode;
return n;
}
// find all nodes that match the `active` class criteria and navigate up the DOM
// until the UL element is found - change it's display property
document.querySelectorAll('li a.active').forEach( a => getparent(a,'ul').style.display='block' )
<li class="">
<i>Accounts</i>
<ul style="display: none;">
<li class="">Profile</li>
<li class="">Edit </li>
</ul>
</li>
For Menu Try this will helpfull
.menu ul{
position: absolute;
display: none;
}
.menu >li{
display: inline-block;
vertical-align: top;
position: relative;
}
.menu li a{
display: block;
padding: 0px 10px;
}
.menu li:hover ul{
display: block;
}
<ul class="menu">
<li>Menu 1</li>
<li>Menu 2
<ul>
<li>Drop Down1</li>
<li>Drop Down2</li>
<li>Drop Down3</li>
</ul>
</li>
<li>Menu 3
<ul>
<li>Drop Down1</li>
<li>Drop Down2</li>
<li>Drop Down3</li>
</ul>
</li>
</ul>
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>
Is it possible to make Bootstrap change the navbar list from text to icons from the browser re-sizing instead of making it into a collapse drop down?
For example, make example 1 turn into example 2 just from the browser re-sizing.
Example 1:
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
Example 2:
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><span class="glyphicon glyphicon-home"></span></li>
<li><span class="glyphicon glyphicon-info-sign"></li>
<li><span class="glyphicon glyphicon-envelope"></li>
</ul>
Sure, add some css like this:
.nav .glyphicon {
display: none;
}
#media screen and (max-width: 300px){
.nav .text {
display: none;
}
.nav .glyphicon {
display: inline;
}
}
Then update your lis to have a span for both text and the icon:
<li>
<span class="text">Home</span><span class="glyphicon glyphicon-home"></span>
</li>
The #media styles specify that when the screen width is 300px or less, then hide the text and show the icon. The icon is hidden by default.
EDIT:
I've updated your fiddle to have the switch working. Here's what I did:
http://jsfiddle.net/cPa6b/
Removed the button in your navbar header
Removed the collapse styles on your navbar div
Added 2 new styles in the media query to counteract bootstrap's style (also changed the max-width to 768 to match bootstrap's default):
.navbar-header, .navbar-nav, .navbar-nav > li { float: left; }
.navbar-nav { margin: 5px; }
You may also consider customizing the #grid-float-breakpoint variable in bootstrap as mentioned here http://getbootstrap.com/components/#navbar
I want to have the class="children" centered in the middle of the page container preferably using css only but if it is not possible you can provide the best js answer. Currently it is just a normal drop down but I want to use it as a mega menu. If I have to add another div structure that's fine.
<div class="main-navigation-wrapper">
<div class="nav pull-left">
<div class="menu-main-menu-container">
<ul id="menu" class="menu no-dropdown">
<li class="menu-item">
Blog
<div class="children">
--- Children items are here
</div>
</li>
</ul>
</div>
</div>
</div>
I have seen some other examples but have attempted a few and none of them center it. I want to find a dynamic approach to where no matter the location of the link in the menu it always centers the menu in the container.
EDIT: Fiddle found here http://jsfiddle.net/YzJ4h/
The simplest would be to add this CSS to horizontaly center your mega menu items :
CSS :
#menu li, .second-menu li {
display:inline-block;
position:relative;
}
#menu > li.mega_width {
display:inline-block;
position:static;
}
#menu > li.mega_width > .children {
position:absolute;
left:0;
right:0;
top:auto;
margin:auto;
}
DEMO
Do a small change in your code:
<div class="main-navigation-wrapper">
<div class="nav pull-left">
<div class="menu-main-menu-container">
<ul id="menu" class="menu no-dropdown" style="margin: auto;">
<li class="menu-item">
Blog
<div class="children">
--- Children items are here
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="main-navigation-wrapper">
<div class="nav pull-left">
<div class="menu-main-menu-container">
<ul id="menu" class="menu no-dropdown" style="margin: auto;">
<li class="menu-item four">
Blog
<div class="children">
--- Children items are here
</div>
</li>
</ul>
</div>
</div>
Here is a rough example of what you're looking for:
http://jsfiddle.net/m8Vj4/
A couple main tips:
position:absolute; / position:relative;
position:absolute will position something relative to its nearest parent that has position:relative. In your case you are positioning the .children elements relative to their parent li, whereas you want them to be positioned relative to .main-navigation-wrapper
Centering an element with display:inline-block;
You can center elements with display:block by adding margin:0 auto, however this won't work for elements with display:inline-block. Instead, you can set text-align:center on their parent, and text-align:left on themselves so they don't inherit centered text.
Hope that helps... reworking your existing HTML/CSS would have taken too much time.
I took some liberty and added some CSS in your existing code. Those are -
.main-navigation-wrapper{width: 1140px; margin: 0 auto; background: #E5F0FF;}
#menu{text-align:center; padding:0px; position:relative;}
#menu li.mega-three.fullwidth{position:static;}
#menu .mega-three div.children{left:0px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box;}
Here is a fiddle.
Hope it will work for you. :-)
You can made certain modifications in your code. Like to avoid scrollbar in children div you have to use width:auto , and some position settings. Please do check with the code below. It may help you.
.menu-main-menu-container ul#menu .children {
left: 0;
position: absolute;
width: auto;
}
.menu-main-menu-container ul#menu .children:hover {
visibility: visible;
}
.menu.no-dropdown {
position: relative;
position:static;
}
Modify class
#menu li, .second-menu li{
position:static;
}
For the inner sub menus inside the children div,
.menu-main-menu-container ul#menu .children .children {
position: relative;
}
You can please check it on fiddle
http://jsfiddle.net/YzJ4h/4/
Give it Width something like 50% to you outer div and set margin:0 auto;
style="margin:0 auto;"
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>.