I've checked my javascript files and I think I have all the right ones. But I am not getting anything to dropdown.
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>
...
<div class="span3"><center>
Buy A Contract
<ul class="dropdown-menu">
<li>Hello World</li>
<li>Why am I not seeing this?</li>
</ul>
</div>
</center>
</div>
...
Looks like one obvious issue: no jQuery reference. Also, since you included this:
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
you don't need to reference bootstrap-dropdown.js (the min file contains all the plugins).
EDIT:
To be clear, you need to have a script tag pointing to a copy of the jQuery library somewhere before the Bootstrap references, so your head should look similar to:
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
You might need to back the jQuery version down, since you're linking to an older version of Bootstrap. If you're getting errors from the Bootstrap source, change the jQuery version to 1.8.3.
Jquery is important to be declared before every other script on your page.
In header insert the below line before every script.:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
But you also have the wrong syntax to create a dropdown menu . It has to be like below:
<ul class="nav">
<li>Link</li>
<li>Link</li>
<li class="dropdown"> <!-- this is the item where your dropdown menu will popup-->
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu"><!-- your drop-down -menu-->
<li>nav1
</li>
<li>nav2
</li>
</ul><!-- dropdown menu ends-->
</li><!-- li with dropdown ends-->
</ul><!-- Main nav ends-->
Related
I have a React app, I'm trying to add a NavBar there like this
<ul id="dropdown1" className="dropdown-content">
<li><NavLink to="/create">Create lessons</NavLink></li>*/}
<li><NavLink to="/lessons">Lessons</NavLink></li>
<li><NavLink to="/quizes">Quizes</NavLink></li>
<li><NavLink to="/quizcreator">Create QuizGame</NavLink></li>
<li></li>
<li></li>
</ul>
<nav>
<div className="nav-wrapper">
Logo
<ul className="right hide-on-med-and-down">
<li><NavLink to="/home">Home</NavLink></li>
<li><a className="dropdown-trigger" href="#!" data-target="dropdown1">Dropdown<i
className="material-icons right">arrow_drop_down</i></a></li>
<li><a href="/" onClick={logoutHandler}>Logout</a></li>
</ul>
</div>
</nav>
I would like this thing to open and show the contents either when clicked or hovered over
The materialize css website describes the following code
$(".dropdown-trigger").dropdown();
But I can't figure out where to insert it? Application on the MERN stack
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
<li>one</li>
<li>two</li>
<li class="divider"></li>
<li>three</li>
</ul>
<nav>
<div class="nav-wrapper">
Logo
<ul class="right hide-on-med-and-down">
<li>Sass</li>
<li>Components</li>
<!-- Dropdown Trigger -->
<li><a class="dropdown-trigger" href="#!" data-target="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>
</ul>
</div>
</nav>
According to the official doc you should be able to enable all your dropdowns like the following:
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.dropdown-trigger');
var instances = M.Dropdown.init(elems);
});
Here is an example (please open in full-page):
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.dropdown-trigger');
var instances = M.Dropdown.init(elems);
});
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
<li>one</li>
<li>two</li>
<li class="divider"></li>
<li>three</li>
</ul>
<nav>
<div class="nav-wrapper">
Logo
<ul class="right hide-on-med-and-down">
<li>Sass</li>
<li>Components</li>
<!-- Dropdown Trigger -->
<li><a class="dropdown-trigger" href="#!" data-target="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>
</ul>
</div>
</nav>
add a onclick event in your second "li" item, pass the event object, call dropdown() function by fetching the classname from the event object.
<li>
<a className="dropdown-trigger" href="#!" onclick{(e) => e.target.className.dropdown();} data-target="dropdown1">
Dropdown<i className="material-icons right">arrow_drop_down</i>
</a>
</li>
Easy ! just add this code to the js file
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.dropdown-trigger');
var instances = M.Dropdown.init(elems);
});
You haven't init the dropdown that's why it's not working ! And don't use this framework maybe MDbootstrap will be perfect because they give you a React version and they have a pretty documentation without ads !
As You said, you are using React, and based on the link that you left on the question, $(".dropdown-trigger").dropdown(); is the jQuery way, you need to find out the React way
You could install materialize-css package, I guess you will find How to use materialize-css with React? helpful for this purpose
then import and use the package like this:
import React, { useRef, useEffect } from 'react';
import M from 'materialize-css';
function DropDown() {
const dropDownTriggerRef = useRef();
useEffect(() => {
M.Dropdown.init(dropDownTriggerRef.current);
}, [])
return (
// all of the other tags and other stuff
....
<li>
<a className="dropdown-trigger"
href="#!" data-target="dropdown1"
ref={dropDownTriggerRef}
>
Dropdown
<i className="material-icons right"> arrow_drop_down </i>
</a>
</li>
....
);
}
This code was working yesterday and now it has suddenly stopped working, I haven't made any alterations to any of my html pages including this one. I am using flask bootstrap but my navbar is working fine and the border that comes up with "list-group-item" is there, it's just the colours that are missing from "list-group-item-success/info/warning".
<div class="col-md-8">
<ul class="list-group">
<a href="{{ url_for('listings.make_bst_listing') }}">
<li class="list-group-item list-group-item-success">
<h4><b>Buy Sell Trade</b> </h4>
<p>Post a listing for an item that you want to buy and/or sell and/or trade</p>
</li>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!--This code was working yesterday and now it has suddenly stopped working, I haven't made any alterations to any of my html pages including this one. I am using flask bootstrap but my navbar is working fine and the border that comes up with "list-group-item" is there, it's just the colours that are missing from "list-group-item-success/info/warning".-->
<div class="col-md-8">
<ul class="list-group">
<li class="list-group-item list-group-item-danger">
<a href="{{ url_for('listings.make_bst_listing') }}">
<h4><b>Buy Sell Trade</b> </h4>
<p>Post a listing for an item that you want to buy and/or sell and/or trade</p>
</a>
</li>
</ul>
</div>
This is working for me...however the html was rearranged so that the Anchor tag is inside of the LI tag. An anchor can't be inside of a UL tag as posted in question.
I have a navigation bar on my homepage that has gone a bit wild. The final button link appears to have expanded below where it is meant to and it has also created a link out of the text I have underneath it. I would appreciate some help on this as I am not by any means a programmer and I am very new to the whole thing and I've most likely made a really obvious error (obvious to anyone but me, that is!). I have also changed any instance to where my real name is mentioned to 'Jon Snow' for obvious reasons and also just because.
<!DOCTYPE html>
<head>
<p>Jon Snow
Blah + A Student</p>
<link rel="stylesheet" type="text/css" href="jonsnow.css">
<link href='http://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="navigation">
<ul>
<li>About Me</li>
<li>Gallery</li>
<li><a href="contactme.html">Contact Me</li>
</ul>
</div>
<div id="intro">
<p>Hi, I'm Jon Snow, a student at Blah, University of Blah. This is my online portfolio!</p>
</div>
</body>
If this is a direct copy/paste from your web site, you need to close you last <a> tag within your <li> for "Contact Me
this tag:
<li><a href="contactme.html">Contact Me</li>
Should be this:
<li>Contact Me</li>
In this line:
<li><a href="contactme.html">Contact Me</li>
You have forgotten to close the <a> tag and this is causing your issue.
To correct it simply close the tag:
<li>Contact Me</li>
I cannot get to work the navbar collapse in Bootstrap 3.
My menu collapse nicely when I change screensize, only it won't show the menu when I press the button.
This is my code:
<header class="container">
<div id="menu" class="navbar navbar-default">
<div class="navbar-header">
<button class="btn btn-success navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="glyphicon glyphicon-chevron-down"></span>
</button>
<div id="logo">
<a href='..'><h3>Logo</h3></a>
</div>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="nav active">Home
</li>
<li class="nav">About
</li>
<li class="nav">Contact
</li>
</ul>
</div>
</div>
</header>
Your HTML works fine, so make sure you are referencing the proper scripts and and styles in your markup
Make sure you have the following in your markup:
bootstrap.min.css
font-awesome.min.css
jquery.js
bootstrap.min.js
Fiddle Works Fine
Copy and paste this HTML:
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<script type="text/javascript" src="//code.jquery.com/jquery-2.0.2.js"></script>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
The issue is not in the HTML your code works perfect in this Fiddle
Check this fiddle
make sure you include the responsive css
http://getbootstrap.com/dist/css/bootstrap.css
and the correct JS
http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js
I also suffered from the same problem, and could not find the solution anywhere. Actually bootstrap.min.js needs jquery to work. SO if you put script src=js/bootstrap.min.js before script src=js/jquery.js it will not work.
The Order of inclusion of jquery and bootstrap.min.js is important.
I'm creating my own wordpress template and I've coded a jQuery drop down menu that works statically but now I'm trying to make it dynamic the css is messed up. The drop down works but the menu doesn't displaying correctly.
The main menu displays vertical instead of horizontal and the secondary menu is horizontal, instead of vertical. Also the orange type for the main menu isn't displaying.
Here's a working static version
I hope I'm explaining myself thoroughly, if you need any more info please let me know.
Here is my wordpress template code
<div class="box">
<ul id="ldd_menu" class="ldd_menu">
<li>
<span>Menu</span>
<!-- Increases to 510px in width-->
<div class="sub_wrap">
<div class="ldd_submenu">
<nav>
<li class="ldd_heading"></li>
<?php wp_nav_menu(array('menu' => 'main_nav')); ?>
</nav>
<a class="ldd_subfoot" href="#"> Accessibility Link</a>
</div>
</li>
</ul>
</div>
<div></div>
I would suspect your code is not handling the output format of the wp_nav_menu method. Now I am not sure of your exact version, but newer versions will out put like this. So you will get extra div added in that you might not expect and the way the child menus are output may not be what you expect. Also, as the previous people said your code is not quite right, missing some tags.
<div class="menu-id-container">
<ul class="nav-menu" id="menu-id">
<li class="..." id="..">LINK
<ul class="sub-menu">
<li>Child LINK1</li>
</ul>
</li>
<li class="..." id="...">LINK2</li>
</ul>
</div>