So my site (jakepotterryan.com) has a vertical nav menu floating to the left. I recently tried creating a dropdown menu containing my projects. I decided to go with Bootstrap stacked nav but I can't seem to get the menu to actually do anything.
maybe it has to do with space constraints within my container that maybe won't allow the menu to expand?
<ul class="nav navbar-stacked">
<li class="active">
Home
</li>
<li>
About Me
</li>
<!--dropdown-->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Projects<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>
Blog
</li>
<li>
Blink Securities
</li>
<li>
Head Tunes LLC.
</li>
<li>
Chub_feed
</li>
</ul>
</li>
<li>
Resume
</li>
</ul>
Uncaught Error: Bootstrap's JavaScript requires jQuery
You need to load jQuery before Bootstrap (and any other library, plugin or function that uses it).
Related
In Hyper from Bootstrap, the following HTML creates a left navigation menu:
<ul class="metismenu side-nav mm-show">
<li class="side-nav-item mm-active">
<a href="javascript: void(0);" class="side-nav-link active">
<i class="uil-home-alt"></i>
<span class="badge badge-success float-right">4</span>
<span> Dashboards </span>
</a>
<ul class="side-nav-second-level mm-collapse mm-show" aria-expanded="false">
<li>
Analytics
</li>
<li>
CRM
</li>
<li class="mm-active">
Ecommerce
</li>
<li>
Projects
</li>
</ul>
</li>
</ul>
My only problem is that by default, it is Hover to open each item up, but what I want is for it to be on click.
How can I do this?
More specifically, the important classes here are the metismenu, side-nav, side-nav-item, and side-nav-link classes. If there's anything I can do or a class I can add to change it from hover to click, that's what I am looking for. Our entire website is built upon Hyper.
So basically I have a unordered list and I used css to display the list in a row using (display:inline). And im having the problem where I try to position one of the list elements to the opposite side of the page. It will act as one whole unit basically. How do I move these separately from each other? Thanks ahead of time! #save-my-code
<ul class="nav nav-pills">
<li>
Portfolio
</li>
<li>
Youtube
</li>
<li>
Blog
</li>
<li>
Photography
</li>
</ul>
Use the class pull-right to pull your elements to the right side of the page.
<ul class="nav nav-pills">
<li class="pull-right">
Portfolio
</li>
<li class="pull-right">
Youtube
</li>
<li>
Blog
</li>
<li>
Photography
</li>
</ul>
Alternatively, use
.pull-right {
float: right
}
if you're not using bootstrap.
Hope this helps!
I'm relatively new to web development, and I'm using Materialize for the project I'm working on right now. My navbar code is attached, for some reason I can click on and follow the links in the sidebar, but not in the nav-content tabs. When I take out the tabs tabs-transparent classes in the ul, it works, but it looks ugly. I am loading JQuery- that was the only resolution I saw to this problem when I googled.
<nav class="blue-grey lighten-1 nav-extended" role="navigation">
<div class="nav-wrapper">
<a id="logo-container" href="#" class="brand-logo center"><img src="/application/static/application/colorondarknotext.png" height=60px/></a>
<ul class="right hide-on-med-and-down">
<li><a class="dropdown-button" href="#!" data-activates="dropdown1">Welcome, (USERNAME)!<i class="material-icons right">arrow_drop_down</i></a></li>
</ul>
<ul id="nav-mobile" class="side-nav">
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li>
<a class="collapsible-header">Welcome, (USERNAME)!<i class="material-icons right">arrow_drop_down</i></a>
<div class="collapsible-body">
<ul>
<li>Account Info</li>
<li>Log Out</li>
</ul>
</div>
</li>
</ul>
</li>
<li>
<div class="divider"></div>
</li>
<li>Application</li>
<li>Decisions</li>
<li>Travel Information</li>
</ul>
<i class="material-icons">menu</i>
</div>
<div class="nav-content hide-on-med-and-down">
<ul class="tabs tabs-transparent">
<li class="tab">Application</li>
<li class="tab">Decisions</li>
<li class="tab">Travel Information</li>
</ul>
</div>
</nav>
I've run into a series of issues like this.
Generally you need to look deeper in the docs. In this case the navbar component docs don't address the issue in their example code. You need to look under javascript>tabs section of the docs to uncover more details about how the tabs work.
http://materializecss.com/tabs.html#external
By default, Materialize tabs will ignore their default anchor behaviour. To force a tab to behave as a regular hyperlink, just specify the target property of that link!
The normal anchor (<a>) functionality is disabled/ignored. In order to make your links work like "normal" you need to add a target attribute to your links.
Assuming you want to open the links in the same window, you would add target="_self" to each <a> tag.
<li class="tab">Application</li>
<li class="tab">Decisions</li>
<li class="tab">Travel Information</li>
I have the following bootstrap menu, the last item in this menu is "More" which is a dropdown contains the left items from that menu, the problem is when user minimize the window the last items start hiding include "More" item.
So my question is: how to avoid the last item ("More") from being hide?
I searched the internet I could not find any solution, I found many are talking about pull left but it did not work for me.
Here is my code:
<div class="collapse navbar-collapse " id="category-navbar-collapse-1">
<ul class="nav navbar-nav ">
<li >
a
</li>
<li >
b
</li>
<li >
c
</li>
<li >
d
</li>
<li class="dropdown ">
<a class="dropdown-toggle" data-toggle="dropdown">
More
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
#Html.Action("GetMoreCategories", "Items")
</ul>
</li>
</ul>
</div>
Any suggestion please?
Feel free to ask for more information.
I'd check the styles over - could be some class name with a breakpoint for display:none on that class. Have a look in Devtools and see what it's throwing out?
As far as your code goes, it looks fine so just check over the CSS, positioning and display, etc.
<div class="collapse navbar-collapse" id="category-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
a
</li>
<li>
b
</li>
<li>
c
</li>
<li>
d
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">More
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
#Html.Action("GetMoreCategories", "Items")
</ul>
</li>
</ul>
</div>
My Bootstrap menu doesn't show the submenu dropdown. Here's the code. I'm using Bootstrap 3. The "dropdown-submenu" class I believe should be the one to show the arrow and on click show the submenu ul.
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Category
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
Arts
<ul class="dropdown-menu">
<li >
Artist Profiles
</li>
</ul>
</li>
<li >
Buzz Quiz
</li>
<li >
Coast
</li>
<li class="dropdown-submenu">
Crime/Security
<ul class="dropdown-menu">
<li >
Rape Resources
</li>
<li >
Security Overview
</li>
</ul>
</li>
<li >
Environment
</li>
<li class="dropdown-submenu">
Fashion
<ul class="dropdown-menu">
<li >
About FAFA
</li>
<li >
Designers
</li>
</ul>
</li>
</ul>
</div>
Bootstrap 3.3.5 (current) documentation and Bootstrap 3.3.5 CSS file do not contain a definition for dropdown-submenu class.
It means that this class is redundant and does not affect the code at all (of course, if you haven't described it in your own CSS).
Here is the JS Fiddle Demo which works how it should work.
I have found a definition of dropdown-submenu in Bootstrap 2.3.2 but it looks like it is depricated now.
Here is the working JS Fiddle Demo with submenus with Bootstrap 2.3.2.
However, I highly recommend not to use an outdated library because of a single feature.