I am developing this website and a you can see i'm using Wordpress and Bootstrap.
I'm trying to add a <button> element with a dropdown menu inside. I just created it with this code
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
...but does not work. What I'm doing wrong?
Any tips?
Thanks in advice
You are missing the boostrap JS as inclusion in your website
Related
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<li class="dropdown">
<a class=dropdown-toggle data-toggle=dropdown href="#">
<i class=material-icons>Button</i>
</a>
<ul class="dropdown-menu dropdown-messages">
<li><i class=ti-user></i> Profile</li>
<li><i class=ti-layout-sidebar-left></i> Logout</li>
</ul>
</li>
Everything works fine in the browser even when shrinking it. But when I try to click a submenu HREF doesn't work it just closes the drop-down menu it doesnt redirect...
This is the official and proper way to make a bootstrap 3.3.7 dropdown button
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Action</li>
<li>Another Link</li>
</ul>
</div>
Reference bootstrap 3 - drop-down button
And also load the js file before the closing body tag. Working demo
I'm working on a small project and I need to use drop-down list, I saw a nice dropdown list without default styling.
What I need just to show how I can make the same.
Example : http://teachyourselftocode.com/
just take the same library and the same script include your project
try this
Link :
http://teachyourselftocode.com/assets/application-7790babf84d03a6beaea0c9e188a7514.css
Script:
http://teachyourselftocode.com/assets/application-c004d1f31767f20710957a4ef632ec32.js
In here you will find the way its easy to implement
http://getbootstrap.com/components/
Example:Run this with bootstrap CDN
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
Hope you get what you need :)
Because I am using this Navbar as a site editing tool rather than a normal Navbar, I require a solution that doesn't involve editing the Bootstrap code and instead use some type of style="" edit instead as I am including the Bootstrap code from elsewhere to make things light, so I can use it on multiple sites.
I am trying to stop the fixed to top Navbar from overlaying the top of the website, this is showing the Logo and top links under the Navbar, instead I am looking to try to layer it on top until the user scrolls down where the Navbar will then cover the website as it should on its way down. Here is the code I am using, if anybody can help me find a solution I would be appreciative!
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
I have attempted to introduce:
style="padding-top:100px;" And changed the px but with no luck, this then totally covers the top of the websites.
You just have to apply the padding style at the body instead the div:
<body style="padding-top: 100px">
It's given in the docs: http://getbootstrap.com/components/#navbar-fixed-top :-)
Body padding required
The fixed navbar will overlay your other
content, unless you add padding to the top of the <body>. Try out your
own values or use our snippet below. Tip: By default, the navbar is
50px high.
body { padding-top: 70px; }
Make sure to include this after the
core Bootstrap CSS.
I used bootstrap in my main menu and since my project has a lot of pages, subpages and sub-subpages I used the bootstrap dropdownmenu to navigate through this.
My client now wants to be able to go to the link associated with the dropdown-button itself too, rather than the childen. My client has text on a page called 'customer support', and text on subpages (children). Ideally I want the user to first click a dropdownmenu button (ex. "Customer service"), and a dropdownmenu opens up (which Bootstrap does), and on a second click be able to go to the link associated with that dropdownmenu button (ex. "/customer-service").
I'll share some code to make it a bit more understandable:
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown"> Dropdown <span class="caret"></span>
<!-- click this menu-button once, and the submenu below opens, click this menu-button twice and you go to /customer-service -->
<ul class="dropdown-menu" role="menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="dropdown"> Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
http://jsfiddle.net/kozog9rx/2/
(be sure to read the comment in the HTML and give the "Result-view" enough space/width so the menu appears)
Well, assuming you are using bootstrap 3.2.0 Here's the code:
<li class="dropdown">
Dropdown
<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
What i'm doing is making the carat open the menu, and the text href to wherever you want it to go to.
I've isolated a malfunctioning component from my project.
I'm trying to enable tab selection for an input search element with a drop down selector
I'm using hosted jquery / bootstrap libraries
Problem: When i tab from the input element to the dropdown component, and hit the down key, the drop down shows, but i can't use the up or down arrows to navigate through the dropdown elements.
Expected: I should be able to use the arrow keys to navigate items in the list. The example in the documentation is keyboard selectable, and shows a corresponding focus state.
Documentation: http://getbootstrap.com/components/#input-groups
Example HTML
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
<ul class="dropdown-menu pull-right">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
Fiddle: http://jsfiddle.net/YXNMB/
You need to add role="menu" to your dropdown UL like so:
<ul class="dropdown-menu pull-right" role="menu">
Without the role="menu" the dropdown component doesn't associate the arrow keys with the drop down elements.