I have a one html page and top of the page I am display the some menu .under menu having some li. Now I want to click on any li and displaying the content of each li below the iframe:
<div class='main_container'>
<ul class="nav nav-tabs">
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
Tea <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li role="presentation">Tea1</li>
<li role="presentation">Tea2</li>
</ul>
</li>
<div id="nav">
<iframe id='link'></iframe>
</div>
</div>
Can anyone tell me how I can do that?
use target="iframe"
here is the example http://jsfiddle.net/47tub983/
Related
Attempting to collapse a dropdown menu (language selection), within a mobile bootstrap navbar. On first click, the dropdown menu with the languages opens fine, after changing languages the dropdown language menu closes, but when I attempt to change the language again, I have to double click the dropdown for it to open. Can anyone help me with this?
<li class="dropdown" dropdown style="margin-top: 25%; left: 7.5%;">
<a href="#" class="dropdown-toggle" dropdown-toggle role="button" ng-click="visible = true">
{{vm.languageSel.name}}
<span class="caret"></span>
</a >
<ul class="dropdown-menu" ng-show="visible">
<li ng-repeat="lang in vm.languages" ng-click="$parent.visible = false">
<a ng-click="vm.chgLang($index)">
{{lang.name}}
</a>
</li>
</ul>
</li>
I think it's because visible is initialised by default to false. Try to add ng-init="visible = true" on the first li directive
I think it's because of the $parent. Can you try without it? Like this:
<li class="dropdown" dropdown style="margin-top: 25%; left: 7.5%;">
<a href="#" class="dropdown-toggle" dropdown-toggle role="button" ng-click="visible = true">
{{vm.languageSel.name}}
<span class="caret"></span>
</a >
<ul class="dropdown-menu" ng-show="visible">
<li ng-repeat="lang in vm.languages" ng-click="visible = false">
<a ng-click="vm.chgLang($index)">
{{lang.name}}
</a>
</li>
</ul>
</li>
i have created a navbar with some links on it and some links have dropdown links. But now when I am reducing the screen size the navbar collapses but the when expanded the dropdown menu is not working.
This my collapse button code.
<a class="toggle-nav" href="#"><img src="../img/nav.png" /></a>
M Script goes like this
<script>
jQuery(document).ready(function() {
jQuery('.toggle-nav').click(function(e) {
jQuery(this).toggleClass('active');
jQuery('.menu ul').toggleClass('active');
e.preventDefault();
});
});
</script>
My navbar code is:
<div id="logo">
<a href="/" ><img src="../img/3d.png" class="image-responsive"/></a>
</div>
<div id="container">
<nav class="menu">
<ul class="active">
<li class="spots">SPOTS</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">PRODUCTS
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="printers">3D PRINTERS</li>
<li class="scanners">3D SCANNERS</li>
<li class="consumable">FILAMENTS</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">SERVICES
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="printing">PRINTING SERVICES</li>
<li class="printing">3D DESIGNING</li>
<
<li class="printing">3D SCANNING</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">LEARN
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="learn">WORKSHOPS</li>
<li class="learn">GUEST LECTURES</li>
<li class="learn">CORPORATE TRAINING</li>
</ul>
</li>
<li class="learn">CONTACT</li>
</ul>
<a class="toggle-nav" href="#"><img src="../img/nav.png" /></a>
</nav>
</div>
I've got a bootstrap 3 drop down and it should close when the user is clicking on the same link again.
Here's my html:
<li class="dropdown menu-karriere">
<a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="asd">
Karriere <b class="caret"></b>
</a>
<ul class="dropdown-menu" data-lvl="0">
<li class="menu-ausbildung">Ausbildung</li>
<li class="menu-geselle">Geselle</li>
<li class="menu-meister">Meister</li>
</ul>
</li>
If I click on the a.dropdown-toggle the drop down opens - which is correct. If I click the same link again, the drop down doesn't close.
Can anybody help me with that?
I couldn't find something on SO or anywhere else.
Thanks.
Use this code. It will give you desired result.
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Karriere
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Ausbildung</li>
<li>Geselle</li>
<li>Meister</li>
</ul>
</div>
You have data-target="#" which prevents it closing:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<li class="dropdown menu-karriere">
<a class="dropdown-toggle" data-toggle="dropdown" href="asd">
Karriere <b class="caret"></b>
</a>
<ul class="dropdown-menu" data-lvl="0">
<li class="menu-ausbildung">Ausbildung
</li>
<li class="menu-geselle">Geselle
</li>
<li class="menu-meister">Meister
</li>
</ul>
</li>
How do I make two buttons appear underneath each other in a dropdown menu of Javascript? This is the code that I tried but they appear next to each other:
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="glyphicon glyphicon-pencil"></i> Registeration Menu <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<a id="btn-register" href="#">User</a>
<a id="btn-registerAdmin" href="#">Admin</a>
</ul>
</li>
<li>
Login
</li>
</ul>
<li><a id="btn-register" href="#">User</a></li>
<li><a id="btn-registerAdmin" href="#">Admin</a></li>
Add <li> tags.
I am new to using Twitter Bootstrap and I have a navbar that doen't collapse as it should.
It shows well on a desktop at fullscreen (all menu items on one line) but as I collapse my browser window from left to right, the navbar items grow to become two rows before appropriately stacking one on top of the other until full collapse.
How do I make the navbar collapse as it should?
I also have a div that I want to place right below the navbar div to show a company logo (image). However, the div seems to start right at the top of the page insted of directly below the navbar div.
How do I fix this?
See: Demo JSFiddle
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">XYZ</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><span class="glyphicon glyphicon-home"></span>Home</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-list-alt"></span>Products<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Onduline Sheets</li>
<li>Onduvilla Tiles</li>
<li>Other Products</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-ok-sign"></span>Guarantee<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Our Guarantee</li>
<li>Tests and Certificates</li>
</ul>
</li>
<li><span class="glyphicon glyphicon-user"></span>Our Clients</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-camera"></span>Projects<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Expos</li>
<li>Training</li>
<li>Eco Friendly Housing</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-inbox"></span>FAQ<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Onduline</li>
<li>Onduvilla</li>
</ul>
</li>
<li><span class="glyphicon glyphicon-download-alt"></span>Downloads</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-info-sign"></span>About<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Vision and Mission</li>
<li>Eco-Responsibility</li>
</ul>
</li>
<li><span class="glyphicon glyphicon-pencil"></span>Contact Us</li>
</ul>
</div>
</div>
</div>
<div id="TitleContent" style="text-align: center">
<img src="images/ecolinelogo.jpg" style="border-style: none" >
<br />
</div>
<div class="container body-content">
<div id="MainContent">
</div>
<hr />
<footer>
<p>© <?php echo date("Y"); ?> - Copyright © XYZBuilding Supplies Ltd - All rights reserved</p>
</footer>
</div>
First of all give your body a little bit of padding as per you navbar height
body{
padding-top:100px;
}
because you are using fixed navbar which is fixed at the top of the page. any content you are going to put after this div will start from the body top. so the padding is necessary which is also mentioned in the docs of bootstrap.
and also you have too many menu item in your menu . which is not getting the proper space specified by the columns. so you need to control them via media queries. and i try to make it work for you here is my jsfiddle link. you could check it . It might helpful for you
http://jsfiddle.net/datechogeek/w4sJC/