I'm making an web with materializecss but links I add on the side nav doesn't work what can I do with it,
When I click the link the side-nav close
code:
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper">
<i class="material-icons">menu</i>
Page Title
<ul class="right hide-on-med-and-down">
<li><a class="waves-effect" href="index.php">Home</a></li>
<li><a class="waves-effect" href="about-us.php">About us</a></li>
<li><a class="waves-effect" href="services.php">Services</a></li>
<li><a class="waves-effect" href="book.php">booking</a></li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li>
<div class="userView">
<div class="background">
<img src="<?php echo $srcurl; ?>/cover.png">
</div>
<img class="circle" src="<?php echo $srcurl; ?>/logo.png">
<span class="black-text name">DIGINEWS</span>
</div>
</li>
<li><center>MENU</center></li>
<li><a class="waves-effect" href="index.php">Home</a></li>
<li><a class="waves-effect" href="about-us.php">About us</a></li>
<li><a class="waves-effect" href="services.php">Services</a></li>
<li><a class="waves-effect" href="book.php">booking</a></li>
</ul>
<script> $(".button-collapse").sideNav(); </script>
</div>
</nav>
</div>
Wrap your JS code for sideNav within documentReady event, and set parameter closeOnClick as true.
Bring your side menu (ul element with class"side-nav") at the same level of div with class navbar-fixed . This is to avoid known issues with overlay. See this stackoverflow question and accepted answer
$( document ).ready(function(){
$('.button-collapse').sideNav({
closeOnClick: true
}
);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper">
<i class="material-icons">menu</i>
Page Title
<ul class="right hide-on-med-and-down">
<li><a class="waves-effect" href="#">Home</a></li>
<li><a class="waves-effect" href="#">About us</a></li>
</ul>
</div>
</nav>
</div>
<ul class="side-nav" id="mobile-demo">
<li><center>MENU</center></li>
<li><a class="waves-effect" href="#!">Home</a></li>
<li><a class="waves-effect" href="#!">About us</a></li>
</ul>
simply code below....
you need to add CDN of materialize sc,js and jquery js
Here is your fix nav bar
<div class="navbar-fixed">
<nav class="nav-wrapper">
<div class="container">
Picnic.lk
<a href="" class="sidenav-trigger" data-target="mobile-menu">
<i class="material-icons">menu</i>
</a>
<ul class="hide-on-med-and-down right">
<li>Photos</li>
<li>Services</li>
<li>Contacts</li>
</ul>
</div>
</nav>
</div>
your mobile nav bar (side nav)
<ul class="sidenav grey lighten-2" id="mobile-menu">
<li><a class="sidenav-close" href="#photos">Photos</a></li>
<li><a class="sidenav-close" href="#services">Services</a></li>
<li><a class="sidenav-close" href="#contact">Contacts</a></li>
</ul>
Add below js code
<script>
$(document).ready(function(){
//side navigation
$('.sidenav').sidenav({
//your additional code goes here
});
});
Related
I am trying to create a simple drop down menu from a menu button (not actually a button). I know I have done this before and have referenced the project the I previously completed and have everything exactly the same and it still will not work. Any help would be appreciated! I have a the most current jQuery UI referenced in my HTML head.
HTML
<header>
<div id='logo_container'>
<img src='img/rinTin_logo_white.png' id='header_logo' alt='RinTin Logo' />
</div>
<div id='menu_button_container'>
<a href='#' id='menu_button_link'><img src='img/menu_button.png' id='menu_button' alt='' /></a>
</div>
<div class='clear'></div>
<div id='mobile_nav_container'>
<nav id='mobile_nav'>
<ul id="primary_mobile">
<li><a href='#'>Schedule</a></li>
<li><a href='#'>Users</a></li>
<li><a href='#'>Shifts</a></li>
<li><a href='#'>System</a></li>
<li><a href='#'>Forums</a></li>
</ul>
<ul id="secondary_mobile">
<li><a href='#'>My Account</a></li>
<li><a href='#'>Help</a></li>
<li><a href='#'>Log Out</a></li>
</ul>
</nav>
</div>
</header>
CSS
#mobile_nav_container{
display:none;
}'
JS
$(document).ready(function() {
$('#mobile_nav_container').removeClass('hidden');
});
$().ready(function(){
$('#menu_button_link').click(function(){
$('#mobile_nav_container').show('slow');
});
});
I am trying to do the Sidenav, when i have a full screen, the menu displays but when i minimize the browser the menu button shows but when i click it, it doesn't display anything. I don't know why. I am using Materialize css. http://jsfiddle.net/xdrL9e83/8/. When i run it in Jsfiddle it shows the Toggle icon being outside Navbar. I don't know why
<nav>
<div class="nav-wrapper container">
<a id="logo-container" href="#" class="brand-logo">Booking</a>
<i class="material-icons"></i>
</div>
<ul class="hide-on-med-and-down">
<li>Patients</li>
<li>Patients History</li>
<li>Bookings</li>
<li>Notes</li>
<li>Add Patient</li>
</ul>
<ul id="slide-out" class="side-nav fixed">
<li class="bold">Patients</li>
<li class="bold">Patients History</li>
<li>Bookings</li>
<li>Notes</li>
<li>Add Patient</li>
</ul>
<i class="mdi-navigation-menu"></i>
</nav>
The Javascript
<script>
$(".button-collapse").sideNav();
</script>
Your DIV is closed in the wrong place. It needs to close after the content of your Nav.
<nav>
<div class="nav-wrapper container">
<a id="logo-container" href="#" class="brand-logo">Booking</a>
<i class="mdi-navigation-menu"></i>
<ul class="right hide-on-med-and-down">
<li>Patients</li>
<li>Patients History</li>
<li>Bookings</li>
<li>Notes</li>
<li>Add Patient</li>
</ul>
<ul id="slide-out" class="side-nav">
<li class="bold">Patients</li>
<li class="bold">Patients History</li>
<li>Bookings</li>
<li>Notes</li>
<li>Add Patient</li>
</ul>
</div>
</nav>
http://jsfiddle.net/aaronfranco/xdrL9e83/14/
Put the menu toggle icon (mdi-navigation-menu) at the top..
<nav>
<i class="mdi-navigation-menu"></i>
<div class="nav-wrapper container">
<a id="logo-container" href="#" class="brand-logo">Booking</a>
<i class="material-icons"></i>
</div>
<ul class="hide-on-med-and-down">
<li>Patients</li>
<li>Patients History</li>
<li>Bookings</li>
<li>Notes</li>
<li>Add Patient</li>
</ul>
<ul id="slide-out" class="side-nav fixed">
<li class="bold">Patients</li>
<li class="bold">Patients History</li>
<li>Bookings</li>
<li>Notes</li>
<li>Add Patient</li>
</ul>
</nav>
Demo: http://codeply.com/go/mMvlUnsNRT
I'm using Materialize for my design. The dropdown and the sidenav doesn't work. The console doesn't give any errors and I did initialize the scripts after jQuery just like the materializecss.js.
Here's the code:
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<!-- CSS -->
<link rel="stylesheet" href="assets/css/style.css">
<!-- Initialize Materialize Scripts -->
<script>$(".button-collapse").sideNav();</script>
<script>$(document).ready(function(){
$('.parallax').parallax();
});</script>
<script>
$(".dropdown-button").dropdown({
hover: false
});
</script>
</head>
<body>
<ul id="dropdown1" class="dropdown-content">
<li><a class="fakelink">Lite</a></li>
<li><a class="fakelink">Standard</a></li>
<li><a class="fakelink">Essential</a></li>
<li class="divider"></li>
<li><a class="fakelink">Enterprise</a></li>
</ul>
<nav role="navigation" class="red">
<div class="nav-wrapper container">
<a id="logo-container" class="brand-logo fakelink">MKHosting <span style="font-size:12pt;font-weight:bold;">- Easy. Fast. Secure.</span></a>
<ul class="right hide-on-med-and-down">
<li><a class="fakelink">Home</a></li>
<li><a class="dropdown-button" href="#!" data-activates="dropdown1">Hostingplans<i class="material-icons right">arrow_drop_down</i></a></li>
<li><a class="fakelink">Other Services</a></li>
<li><a class="fakelink">About</a></li>
</ul>
<ul id="nav-mobile" class="side-nav" style="left:-250px;">
<li><a class="fakelink truncate">Home</a></li>
<li><a class="dropdown-button" href="#!" data-activates="dropdown1">Hostingplans<i class="material-icons right">arrow_drop_down</i></a></li>
<li><a class="fakelink truncate">Other Services</a></li>
<li><a class="fakelink truncate">About</a></li>
</ul>
<a class="button-collapse fakelink" data-activates="nav-mobile"><i class="material-icons navColorFix">menu</i></a>
</div>
</nav>
You need to make sure the document has loaded before setting the side nav and dropdown. Just move that code inside your document.ready function
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<!-- CSS -->
<link rel="stylesheet" href="assets/css/style.css">
<!-- Initialize Materialize Scripts -->
<script>$(document).ready(function(){
$(".button-collapse").sideNav();
$('.parallax').parallax();
$(".dropdown-button").dropdown({
hover: false
});
});</script>
<body>
<ul id="dropdown1" class="dropdown-content">
<li><a class="fakelink">Lite</a></li>
<li><a class="fakelink">Standard</a></li>
<li><a class="fakelink">Essential</a></li>
<li class="divider"></li>
<li><a class="fakelink">Enterprise</a></li>
</ul>
<nav role="navigation" class="red">
<div class="nav-wrapper container">
<a id="logo-container" class="brand-logo fakelink">MKHosting <span style="font-size:12pt;font-weight:bold;">- Easy. Fast. Secure.</span></a>
<ul class="right hide-on-med-and-down">
<li><a class="fakelink">Home</a></li>
<li><a class="dropdown-button" href="#!" data-activates="dropdown1">Hostingplans<i class="material-icons right">arrow_drop_down</i></a></li>
<li><a class="fakelink">Other Services</a></li>
<li><a class="fakelink">About</a></li>
</ul>
<ul id="nav-mobile" class="side-nav" style="left:-250px;">
<li><a class="fakelink truncate">Home</a></li>
<li><a class="dropdown-button" href="#!" data-activates="dropdown1">Hostingplans<i class="material-icons right">arrow_drop_down</i></a></li>
<li><a class="fakelink truncate">Other Services</a></li>
<li><a class="fakelink truncate">About</a></li>
</ul>
<a class="button-collapse fakelink" data-activates="nav-mobile"><i class="material-icons navColorFix">menu</i></a>
</div>
</nav>
Have you tried putting script at the END OF BODY ELEMENT? It works for me.
<script>$(document).ready(function(){
$(".button-collapse").sideNav();
$('.parallax').parallax();
$(".dropdown-button").dropdown({
hover: false
});
});
</script>
This code worked for me!! You can find the entire explanation in here: http://materializecss.com/side-nav.html
<ul id="slide-out" class="side-nav">
<li>First Sidebar Link</li>
<li>Second Sidebar Link</li>
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li>
<a class="collapsible-header">Dropdown<i class="mdi-navigation-arrow-drop-down"></i></a>
<div class="collapsible-body">
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
</ul>
</div>
</li>
</ul>
</li>
</ul>
<ul class="right hide-on-med-and-down">
<li>First Sidebar Link</li>
<li>Second Sidebar Link</li>
<li><a class="dropdown-button" href="#!" data-activates="dropdown1">Dropdown<i class="mdi-navigation-arrow-drop-down right"></i></a></li>
<ul id='dropdown1' class='dropdown-content'>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
</ul>
</ul>
<i class="mdi-navigation-menu"></i>
Okay so I'm trying to save this function using cookies, and I can't seem to get the cookies to interact with the function.
var backImage = new Array();
backImage[0] = "dotPattern.png";
backImage[1] = "stripesPattern.png";
backImage[2] = "boxPattern.png";
backImage[3] = "";
function changeBGImage(whichImage){
document.body.background = backImage[whichImage];
}
Can you let me know what I'm doing wrong or what else I have to do. I've got the image files and the html all in the same folder. Let me know if you need anything else and I can put it up here too.
Thank you very much for any help you're able to offer
Here is the page the cookies are meant to be used on:
<DOCTYPE! html>
<html>
<head>
<link rel="stylesheet" href="reset.css" />
<link rel="stylesheet" href="style.css" />
<script src="customise.js"></script>
<title>Vitalita - My Profile</title>
<div id="Logo">
<img id="logo" src="LogoSmall.png" height=125px border="0" alt="Image not found"></img>
</div>
<body>
<header>
<nav id="top">
<ul id="menu">
<li><a class="nav" id="about" href="#">about</a>
<ul class="submenu">
<li><a class="aboutMenu" href="aboutus.html">about us</a></li>
<li><a class="aboutMenu" href="contactus.html">contact us</a></li>
</ul>
</li>
<li><a class="nav" id="health" href="#">health</a>
<ul class="submenu">
<li><a class="healthMenu" href="#">information</a></li>
<li><a class="healthMenu" href="#">exercise</a></li>
<li><a class="healthMenu" href="recipes.html">recipes</a></li>
</ul>
</li>
<li><a class="nav" id="media" href="#">media</a>
<ul class="submenu">
<li><a class="mediaMenu" href="articles.html">articles</a></li>
<li><a class="mediaMenu" href="#">videos</a></li>
</ul>
</li>
<li><a class="nav" id="tools" href="#">tools</a>
<ul class="submenu">
<li><a class="toolMenu" href="BMI.html">BMI calculator</a></li>
<li><a class="toolMenu" href="#">measurements</a></li>
<li><a class="toolMenu" href="#">exercise generator</a></li>
</ul>
</li>
<li><a class="nav" id="social" href="#">social</a>
<ul class="submenu">
<li><a class="socialMenu" href="social.html">social media</a></li>
<li><a class="socialMenu" href="#">games</a></li>
</ul>
</li>
<li><a class="nav" id="account" href="registration.html">account</a>
<img src="icon.png" height=19px id="icon"></img>
<ul class="submenu">
<li><a class="accountMenu" href="#">my profile</a></li>
<li><a class="accountMenu" href="#">my progress</a></li>
<li><a class="accountMenu" href="#">my favourites</a></li>
</ul>
</li>
</ul>
</nav>
</header>
<body>
<img id=insta src="insta.png" height=50px></img>
<img id=fb src="fb.png" height=50px></img>
<img id=twit src="twit.png" height=50px></img>
<section id="feature">
Dot Pattern
Stripes Pattern
Box Pattern
Default
</section>
<hr id="first">
<footer>
<div class="Foot">
<div id="footHome">
<bold>Home</bold>
<ul class="sitemap">
<li><a class="links" href="home.html">Home Page</a>
</ul>
</div>
<div id="footAbout">
<bold>About</bold>
<ul class="sitemap">
<li><a class="links" href="aboutus.html">About Us</a>
<ul class="sitemap">
<li><a class="links" href="">Style Guide</a>
<li><a class="links" href="">Evaluation Plan</a>
</ul>
<li><a class="links" href="contactus.html">Contact Us</a>
<li><a class="links" href="feedbackform.html">Feedback</a>
<li><a class="links" href="helpdesk.html">FAQ</a>
<li><a class="links" href="privacy.html">Privacy Policy</a>
</ul>
</div>
<div id="footHealth">
<bold>Health</bold>
<ul class="sitemap">
<li><a class="links" href="#">Information</a>
<li><a class="links" href="#">Exercise</a>
<li><a class="links" href="recipes.html">Recipes</a>
</ul>
</div>
<div id="footMedia">
<bold>Media</bold>
<ul class="sitemap">
<li><a class="links" href="#">Articles</a>
<li><a class="links" href="#">Videos</a>
<li><a class="links" href="#">Games</a>
</ul>
</div>
<div id="footTools">
<bold>Tools</bold>
<ul class="sitemap">
<li><a class="links" href="BMI.html">BMI calculator</a>
<li><a class="links" href="#">Measurements</a>
<li><a class="links" href="#">Exercise generator</a>
</ul>
</div>
<div id="footSocial">
<bold>Social</bold>
<ul class="sitemap">
<li><a class="links" href="social.html">Social Media</a>
<li><a class="links" href="#">Games</a>
</ul>
</div>
<div id="footAccount">
<bold>Account</bold>
<ul class="sitemap">
<li><a class="links" href="#">My Profile</a>
<li><a class="links" href="#">My Progress</a>
<li><a class="links" href="#">My Favourites</a>
</ul>
</div>
</div>
<hr id="second">
</footer>
<div id="copy">
Copyright © Vitalita 2014. All Rights Reserved.
<div>
</body>
</html>
To use cookies you need to save and load them explicitly. You can find how to do this in javascript in this question.
I have a horizontal list menu and another horizontal list sub menu for each menu item.
Now when the page loads for the first time, first top menu with its sub menu and other top menus should show up and stay on if I mouse away or until i hover over other top menu item. As i hover over the other menus, their corresponding sub menus should show up.
Can someone show me how to do it using javascript or jquery or css only?
<div id="mytabs1" class="basictab">
<ul>
<li class="basictab1" id="li1"><a id="link1" href="http://mysite/Benefits.aspx" rel="sc1" >Benefits</a></li>
<li class="basictab1" id="li2"><a id="link2" href="http://mysite/BESTPlan.aspx" rel="sc2">BEST Plan</a></li>
<li class="basictab1" id="li3"><a id="link3" href="http://mysite/Insurance.aspx" rel="sc3">Insurance</a></li>
</ul>
</div>
<DIV class="tabcontainer">
<div id="sc1" class="tabcontent">
<ul>
<li><a id="link1-1" href="http://test.com">Link 1a</a></li>
<li><a id="link1-2" href="http://test.com">Link 1b</a></li>
</ul>
</div>
<div id="sc2" class="tabcontent">
<ul>
<li><a id="link2-1" href="http://test.com">Link 2a</a></li>
<li><a id="link2-2" href="http://test.com">Link 2b</a></li>
</ul>
</div>
<div id="sc3" class="tabcontent">
<ul>
<li><a id="link3-1" href="http://test.com">Link 3a</a></li>
<li><a id="link3-2" href="http://test.com">Link 3b</a></li>
</ul>
</div>
</DIV>
here's an example to point you in the right direction.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style>
ul, li
{
display: block;
}
.sublinks
{
display: none;
}
</style>
</head>
<body>
<div id="mytabs1" class="basictab">
<ul>
<li class="basictab1" id="li1">
<a id="link1" href="http://mysite/Benefits.aspx" rel="sc1" >Benefits</a>
<ul class="sublinks">
<li><a id="link1-1" href="http://test.com">Link 1a</a></li>
<li><a id="link1-2" href="http://test.com">Link 1b</a></li>
</ul>
</li>
<li class="basictab1" id="li2">
<a id="link2" href="http://mysite/BESTPlan.aspx" rel="sc2">BEST Plan</a>
<ul class="sublinks">
<li><a id="link2-1" href="http://test.com">Link 2a</a></li>
<li><a id="link2-2" href="http://test.com">Link 2b</a></li>
</ul>
</li>
<li class="basictab1" id="li3"><a id="link3" href="http://mysite/Insurance.aspx" rel="sc3">Insurance</a></li>
</ul>
</div>
<script>
$('.basictab1').hover(function()
{
$(this).find('ul').toggle();
});
</script>
</body>
</html>