I'm trying to create a nav bar with dropdown as it's explained in the Materialize documentation.
http://archives.materializecss.com/0.100.2/navbar.html
This is the code:
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.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-button" href="#!" data-activates="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>
</ul>
</div>
</nav>
<script>$(".dropdown-button").dropdown();
</script>
But when i click the dropdown button, nothing happens.
What am I doing wrong?
There are two problems with your code:
You were missing a reference to materialize.min.js.
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
The newest version of Materialize uses data-target instead of data-activates. The documentation you're reading is for an older version. Here is the latest documentation: https://materializecss.com/ (I've updated the versions for you in the example below.)
$('.dropdown-button').dropdown();
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<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-button" href="#!" data-target="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>
</ul>
</div>
</nav>
You need to load the Materialize js as well - https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/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-button" href="#!" data-activates="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>
</ul>
</div>
</nav>
<script>$(".dropdown-button").dropdown();
</script>
I did an interesting test.
When I just create a html page detached from my project and past the code you sent me here, it works even in my machine. It's not working inside my project in the app.component.html (I'm using angular client) and it won't load after running with npm start. Maybe some configuration in the project.
Related
I'm trying to add a dropdown menu in my nav bar using materialise, but it's not working. I'm adding the code snippet. In addition to this, I have imported materialise CSS and icons in the head, as well as the JS and JQuery in the body.
Can someone help me with where I'm going wrong? This is the documentation https://materializecss.com/navbar.html#!
<ul id="dropdown1" class="dropdown-content">
<li>Bollywood Music</li>
<li>OTT TV Series</li>
<li>Academic Literature</li>
<li>YA Fiction</li>
</ul>
<nav class="nav-wraper #362b32">
<div class="container">
<ul class= "right hide-on-med-and-down">
<li>Home</li>
<li><a class="dropdown-button" href="#!" data-activates="dropdown1">Articles<i class="material-icons right">arrow_drop_down</i></a></li>
</ul>
</div>
</nav>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!--JQuery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".dropdown-trigger").dropdown();
})
</script>
Check that the class names are correct. The class nav-wraper in the <nav> should be nav-wrapper, not nav-wraper.
As for the dropdown, the code is initializing the dropdown for the class dropdown-trigger, but the HTML uses dropdown-button. Change class="dropdown-button" to class="dropdown-trigger".
The documentation also states that the correct attribute for specifying the ID of the dropdown target is data-target, but the HTML uses data-activates, so change that.
Finally, JQuery should be loaded before Materialize, so that Materialize can register the .dropdown() function with JQuery.
Try this:
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
</head>
<body>
<ul id="dropdown1" class="dropdown-content">
<li>Bollywood Music</li>
<li>OTT TV Series</li>
<li>Academic Literature</li>
<li>YA Fiction</li>
</ul>
<nav class="nav-wrapper">
<div class="container">
<ul class="right">
<li>Home</li>
<li>
<a class="dropdown-trigger" href="#" data-target="dropdown1">
Articles<i class="material-icons right">arrow_drop_down</i>
</a>
</li>
</ul>
</div>
</nav>
<!--JQuery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
$(document).ready(function() {
$(".dropdown-trigger").dropdown();
});
</script>
</body>
</html>
I have a basic html-page with a navbar (Navbar Documentation) and a collapsible sidenav (SideNav Documentation).
The sidenav itself works fine but the "onOpenStart" and "onEndClose" events both trigger as soon as the page is done loading and not when the sidenav opens/closes.
I guess an alternative would be to hook some events on the sidenav-trigger and go from there but that seems quite unneccessary if these events already exist.
JsFiddle: https://jsfiddle.net/gvgo2Lu2/2/
Any help would be appreciated
HTML
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<nav>
<div class="nav-wrapper">
<div class="row">
<div class="col s12">
Logo
<a href="#" data-target="mobile-nav" class="sidenav-trigger">
<i id="test" class="material-icons">menu</i>
</a>
<ul class="right hide-on-med-and-down">
<li>
Link
</li>
</ul>
</div>
</div>
</div>
</nav>
<!-- MOBILE NAV -->
<ul class="sidenav" id="mobile-nav">
<li>
Link
</li>
</ul>
</body>
JS
var elem = document.querySelector('.sidenav');
var instance = M.Sidenav.init(elem, {
onOpenStart: console.log("I trigger as soon as the page is loaded"),
onCloseEnd: console.log("same")
});
According to the documentation the onOpenStart and onCloseEnd events need a callback function. But, you are using the result of a computation: console.log(....). Because that value is undefined you are not adding the event handlers!
In order to overcome the issue you need to change your init to (updated fiddle):
var elem = document.querySelector('.sidenav');
var instance = M.Sidenav.init(elem, {
onOpenStart: function () {
console.log("I trigger as soon as the page is loaded");
},
onCloseEnd: function () {
console.log("same");
}
});
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<nav>
<div class="nav-wrapper">
<div class="row">
<div class="col s12">
Logo
<a href="#!" data-target="mobile-nav" class="sidenav-trigger">
<i class="material-icons">menu</i>
</a>
<ul class="right hide-on-med-and-down">
<li>
Link
</li>
</ul>
</div>
</div>
</div>
</nav>
<!-- MOBILE NAV -->
<ul class="sidenav" id="mobile-nav">
<li>
Link
</li>
</ul>
I am using Twitter Bootstrap in my web app and have included bootstrap.css/js files. But when I click on menu base it doesn't unfold and nothing happens.
Any idea what is wrong? Here is my code:
<li class="dropdown">
menu base
<ul class="dropdown-menu" aria-labelledby="more-drop">
<li class="dropdown-menuitem">
sub menu1
</li>
<li class="dropdown-menuitem">
sub menu2
</li>
</ul>
</li>
Here is the Working Code:
Working Fiddle: Dropdown Menu Fix
Mistake:
1- Dropdown Menu 'aria-labelledby' is not defined
2- Anchor Tag ID is not set with 'aria-labelledby' value
aria-labelledby: Identifies the element (or elements) that labels the current element.
<li class="dropdown">
<a id="dropdownMenu1" class="dropdown-toggle" data-toggle="dropdown">menu base</a>
<ul class="dropdown-menu" aria-labelledby="more-drop" aria-labelledby="dropdownMenu1">
<li class="dropdown-menuitem">
sub menu1
</li>
<li class="dropdown-menuitem">
sub menu2
</li>
</ul>
</li>
You have missed the following attributes necessary for Bootstrap dropdown to work as toggle dropdown menu.
role="button"
aria-haspopup="true"
aria-expanded="false"
Code Snippet
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/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://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.min.js"></script>
<ul>
<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>
Hope this may helps you
<!DOCTYPE html>
<html>
<head>
<title>dropdown menu of twitter bootstrap doesn't work — doesn't unfold</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<li class="dropdown">
menu base <b class="caret"></b>
<ul class="dropdown-menu">
<li>sub menu1</li>
<li>sub menu2</li>
</ul>
</li>
</body>
</html>
Will you please tell me what is wrong about this code !!!
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li>Register</li>
<li class="dropdown">
My Profile <span class="caret"></span>
<ul class="dropdown-menu">
<li>Messages</li>
<li>Friends</li>
<li>Profile</li>
<li>Settings</li>
<li>Login</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Logout</li>
</ul>
</div>
I am also including this within my html file :
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
When i click the dropdown menu it is not functioning at all , please i need help.
The jquery call should come first.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
also, you forgot the close tag on the bootstrap call.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"</script>
should be:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
ˆ
I have a site and i am working in php html css javascript/jquery
i am using bootstrap theme for the first time. Its so good using bootstrap but i have a problem in menu bar navigation active link
even if i add a jquery changing a active class it doesnot work .
<!DOCTYPE html>
<html lang="en">
<head>
<title>Real Estate</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="assets/style.css"/>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/script.js"></script>
<!-- Owl stylesheet -->
<link rel="stylesheet" href="assets/owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="assets/owl-carousel/owl.theme.css">
<script src="assets/owl-carousel/owl.carousel.js"></script>
<!-- Owl stylesheet -->
<!-- slitslider -->
<link rel="stylesheet" type="text/css" href="assets/slitslider/css/style.css" />
<link rel="stylesheet" type="text/css" href="assets/slitslider/css/custom.css" />
<script type="text/javascript" src="assets/slitslider/js/modernizr.custom.79639.js"></script>
<script type="text/javascript" src="assets/slitslider/js/jquery.ba-cond.min.js"></script>
<script type="text/javascript" src="assets/slitslider/js/jquery.slitslider.js"></script>
<!-- slitslider -->
<script>
$(document).ready(function(e) {
$('#username').hover(
function (){
$('#submenu').css("display", "block");
/*$('#submenu').css("background-color", "#999");
$('#submenu').css("color", "#000");*/
$('#submenu').css("z-index", "1");
},
function () {
$('#submenu').css("display", "none");
}
);
});
</script>
</head>
<body>
<!-- Header Starts -->
<div class="navbar-wrapper">
<div class="navbar-inverse" role="navigation">
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Agents</li>
<li>Contact Us</li>
<li>About Us</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Your Name<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Edit Profile</li>
<li>Log Out</li>
</ul>
</li>
<li>Log in</li>
<li>Register</li>
</div>
</nav>
</div>
</div>
</div>
<!-- #Header Starts -->
<div class="container">
<!-- Header Starts -->
<div class="header">
<img src="images/logo.png" alt="Realestate">
<ul class="pull-right" style="margin-top:10px;">
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Home
</a>
<?php if (!empty($_SESSION['uname'])) { ?>
<ul class="dropdown-menu">
<li>Add Property</li>
<li>Edit Property</li>
</ul>
<?php } ?> </li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Land
</a>
<?php if (!empty($_SESSION['uname'])) { ?>
<ul class="dropdown-menu">
<li>Add Property</li>
<li>Edit Property</li>
</ul>
<?php } ?></li>
</ul>
<!-- <div id ="salesBranch" style="display:none">
<div> Add Property </div> <div> Edit Property </div> -->
</div>
</div>
<!-- #Header Starts -->
</div>
i added following jquery to change the active class but also its not working properly
$(".nav a").on("click", function(){
$(".nav").find(".active").removeClass("active");
$(this).parent().addClass("active");
});
I think it might be because your menu loads different pages than the one you are on. You need to set the active class on the appropriate nav link on page load. For example you could test if the href of the link is the same as the current page name and add class "active" if it is.