Just looked at the Bootstrap toolkit and attempting to get the dropdown's working on the top menu.
The code I have for the menu is as follows
<div class="topbar">
<div class="fill">
<div class="container">
<ul class="nav">
<li class="active">Home</li>
<li>About Us</li>
<li>Site News</li>
<li class="dropdown">
Community
<ul class="dropdown-menu">
<li>Chatroom</li>
<li class="divider"></li>
<li>Forums</li>
</ul>
</li>
</ul>
<form class="pull-left" action="">
<input type="text" placeholder="Search" />
</form>
<ul class="nav secondary-nav">
<li class="dropdown">
Account
<ul class="dropdown-menu">
<li>Profile</li>
<li>Settings</li>
<li>Messages</li>
<li class="divider"></li>
<li>Admin</li>
<li class="divider"></li>
<li>Logout</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
The dropdown isn't doing anything when clicked?
I have included the following css file.
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css">
Can anyone help me here?
Thanks.
Try to add the JavaScript file for the dropdown functionality too - http://twitter.github.com/bootstrap/#javascript
You need to make sure that you have a reference to jquery, and a reference to the bootstrap js in your page.
e.g
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="http://twitter.github.com/bootstrap/1.4.0/bootstrap-dropdown.js"></script>
Then, you either need to give one of your containers the attribute, data-dropdown="dropdown" , or explicitly set the container as a dropdown container using jquery, $('#mycontainerid').dropdown();
Generally having Jquery referenced above Bootstrap does the trick. You don't even have to mention bootstrap-dropdown explicitly. worked for me on two different occasions. Hope it helps!
Try adding the data-dropdown property to your initial <li> e.g.
<li class="dropdown" data-dropdown="dropdown">
Hope this helps.
Related
I am trying to style the nav in a template theme that I neither wrote nor picked. The nav uses lists in its structures and the children at various levels have the same class. I'm hoping someone can help me find the right CSS selector to pick the third level down. Here is the basic structure:
<nav class="nonbounce desktop vertical">
<ul>
<li class="item sub active">
<a class="itemLink" href="https://sitename/tools/" title="Tools">Tools</a>
<ul class="subnav">
<li class="subitem">
<a class="subitemLink" href="https://sitename/tools/outdoors/" title="Outdoors">Outdoors</a>
<ul class="subnav">
<li class="subitem">
<a class="subitemLink" href="https://www.safenready.net/tools/outdoors/mowers/" title="mowers">Mowers</a> THIS ONE!!!
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
What I need to do is grab the 3rd level down (called Mowers in example).
My ultimate goal is to style this level and move it vertically but first I need to be able to modify only that level with CSS.
This is a new site but I can provide the real site URL if that would help.
jc
You can try this
.subitemLink[title~="mowers"] {
font-size:20px;
}
<nav class="nonbounce desktop vertical">
<ul>
<li class="item sub active">
<a class="itemLink" href="https://sitename/tools/" title="Tools">Tools</a>
<ul class="subnav">
<li class="subitem">
<a class="subitemLink" href="https://sitename/tools/outdoors/" title="Outdoors">Outdoors</a>
<ul class="subnav">
<li class="subitem">
<a class="subitemLink" href="https://www.safenready.net/tools/outdoors/mowers/" title="mowers">Mowers</a> THIS ONE!!!
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
I'm using materialize as a UI framework in my rails app, and everything is working correctly except the 'material-icons' 'menu' option isn't working properly.
The full code is further below, but this is the piece that is not working appropriately:
<i class="material-icons">menu</i>
Instead of turning into a hamburger icon, when I shrink the browser to trigger the responsiveness, it just displays the text node 'menu'. I can't figure out what I am doing wrong. Everything else is working.
This is the entire nav/dropdown structure:
<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
<li>My Profile</li>
<li>My Courses</li>
<li class="divider"></li>
<li>Logout</li>
</ul>
<!-- Dropdown Structure -->
<ul id="dropdown2" class="dropdown-content">
<li>My Profile</li>
<li>My Courses</li>
<li class="divider"></li>
<li>Logout</li>
</ul>
<header>
<nav class="z-depth-2">
<div class="container">
<div class="nav-wrapper">
OppSim
<i class="material-icons">menu</i>
<ul class="right hide-on-med-and-down">
<!-- web view -->
<li>Courses</li>
<li>Signup</li>
<li>Login</li>
<!-- Dropdown Trigger -->
<li><a class="dropdown-button" href="#!" data-activates="dropdown1">JTB<i class="material-icons right"></i></a></li>
</ul>
<ul class="side-nav" id="mobile-demo">
<!-- mobile view -->
<li>Courses</li>
<li>Signup</li>
<li>Login</li>
<!-- Dropdown Trigger -->
<li><a class="dropdown-button" href="#!" data-activates="dropdown2">JTB<i class="material-icons right"></i></a></li>
</ul>
</div>
</div>
</nav>
</header>
Or maybe I should stick with golf.
To use icons in materalize you have to include this font
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
as per their official documentation here
I create a very simple dropdown with sub level items in bootstrap 3 as below.
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
File
<ul class="dropdown-menu">
<li>Company</li>
<li class="dropdown">
Utilities<span class="pull-right">ยป</span>
<ul class="dropdown-menu">
<li>Item1</li>
<li>Item2</li>
</ul>
</li>
<li>Services</li>
</ul>
</li>
</ul>
</div>
I already include bootstrap.css, jquery.js adn bootstrap.js already. For the first level it works fine, but the second level does not work. I don't know why.
Bootstrap 3.x doesn't support dropdown submenus. You can achieve it by adding more css styles.
Follow this link https://stackoverflow.com/a/18024991/5488620
It may help you.
I am experiencing an issue with bootstrap in IE. It relates to the .pull-right class with just floats the <div> to the right.
This is a visual demonstation:
Chrome 28
IE10
The menu is construted using KendoUI and my site uses Bootstrap v.2.3.2 RC2. I am not aware of any compatibility issues with IE10. This issue does NOT present itself with IE9 or below though which is strange.
Here is the code:
<div class="main-ui-nav">
<div class="container">
<ul id="menu">
<li>
Customer
<ul>
<li>Customer Details</li>
</ul>
</li>
<li>
Products
<ul>
<li>View Products</li>
</ul>
</li>
<li>
Sites
<ul>
<li>Add Site</li>
<li>View Registered Sites</li>
</ul>
</li>
<li>
Payments
<ul>
<li>Invoices</li>
<li>Agreements</li>
<li>History</li>
<li>Oustanding</li>
<li>Statements</li>
</ul>
</li>
<li>
Notes
<ul>
<li>Create Note</li>
<li>Amend</li>
<li>View</li>
</ul>
</li>
<li class="pull-right">
Session Options
<ul>
<li>Exit Account</li>
<li>Logout</li>
</ul>
</li>
<li class="pull-right">Creation Options
<ul>
<li>Create Payment</li>
<li>Create Note</li>
<li>Create Invoice</li>
</ul>
</li>
</ul>
</div>
</div>
Thanks for your help in advance.
JS FIDDLE : http://jsfiddle.net/davcpas123/QFdTN/8/embedded/result/
This issue was due the KendoUI overriding the standard .clearfix classes.
To fix this I added :
.clearfix {
clear:both;
}
to my ui-full.css file.
So, I'm playing around with Twitter's new CSS framework, Bootstrap.
What I'm encountering is as follows: I've added the topbar div to my page:
<div class="topbar">
<div class="fill">
<div class="container">
<h3>Project Name</h3>
<ul>
<li class="active">Home</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
<form action="">
<input type="text" placeholder="Search">
</form>
<ul class="nav secondary-nav">
<li class="menu">
Dropdown
<ul class="menu-dropdown">
<li>Secondary link</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Another link</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
However, this has some un-expected behavior: It proceeds to float down the page at the top - example here.
Is there a way to prevent that from happening, or do I need to consider a different framework?
You mean the top bar is always to the top? That is the inteded behaviour.
You can change it by removing
position: fixed
in topbar's CSS definition.
from http://twitter.github.com/bootstrap/components.html#navbar
To make the navbar fixed to the top of the viewport, add .navbar-fixed-top to the outermost div, .navbar. In your CSS, you will also need to account for the overlap it causes by adding padding-top: 40px; to your <body>.
<div class="navbar navbar-fixed-top">
...
</div>
<div class="topbar">
<div class="fill">
<div class="container">
<h3>Project Name</h3>
<ul>
<li class="active">Home</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
<form action="">
<input type="text" placeholder="Search">
</form>
<ul class="nav secondary-nav">
<li class="menu">
<li class="dropdown" data-dropdown="dropdown" >
Dropdown
<ul class="menu-dropdown">
<li>Secondary link</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Another link</li>
</ul>
</li>
</li>
</ul>
</div>
</div>