I'm having problems making the sticky nav function work properly :(
What I want my nav bar to have/do is have the "menu" function and label on the left and a "telephone icon" icon on the right that will allow someone to make a call straight to me.
The other thing the nav is doing that I can understand is hiding itself behind the first picture on the page.
If anybody can help it would be greatly appreciated.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>ABC</title>
<link rel="stylesheet" href="css/foundation.css">
<script src="js/vendor/custom.modernizr.js"></script>
<!-- Included JS Files -->
<script src="js/foundation/foundation.topbar.js"></script>
</head>
<body>
<!-- START Navigation -->
<div class="contain-to-grid sticky">
<nav class="top-bar">
<ul class="title-area">
<!-- Title Area -->
<li class="name"></li>
<li class="toggle-topbar menu-icon"><span>MENU</span></li>
<li></li>
<li class="toggle-topbar call-icon"><img src="img/75-phone.png" width="20" height="20"></li>
<!-- Right Nav Section -->
<ul class="right">
<li class="divider"></li>
<li>About</li>
<li class="divider"></li>
<li class="has-dropdown"> Services
<ul class="dropdown">
<li class="divider">1</li>
<li class="divider">2</li>
<li class="divider">3</li>
<li class="divider">4</li>
<li class="divider">5</li>
<li class="divider">6</li>
<li class="divider">7</li>
</ul>
</li>
<li class="divider"></li>
<li>Contact</li>
</ul>
</section>
</nav>
</div>
<!-- END Navigation -->
<!-- START Mobile logo -->
<div class="row">
<div class=" small-12 large-12 columns"><img src="img/landing-page-tiles-logo.jpg"><center><h2></h2></center>
<hr />
</div>
</div>
<!-- END Mobile Logo -->
<!-- END main content -->
<script> document.write('<script src=' + ('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') + '.js><\/script>') </script>
<script src="js/foundation.min.js"></script>
<script>$(document).foundation(); </script>
</body>
</html>
If these two pieces of code are displayed consecutively, your Right Nav Section is positioned within the <ul class="title-area"> tag. Close this list to allow your <ul class="right"> list to be displayed in its regular position.
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>
So I have been building a new website recently and experimenting a lot with jQuery.
Unfortunately I seem to be having a massive problem getting my jquery file to actually work in the website.
Here is the html code. As you can see, I have jquery added by CDN and the javascript is in a totally separate file. I added an alert into the primary function just to check if it's even reading what I have put and I am stuck.
<html>
<head>
<!--Browser Data-->
<meta charset="utf-8">
<!--Meta Data -->
<title>website</title>
<meta name="description" content="The Official Page of website">
<meta name="Keywords" content="some website stuff">
<meta name="author" content="me">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS File Locations -->
<link rel="stylesheet" href="css/main.css">
<!-- Javascript File Locations -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<!-- Fonts used -->
<link href="https://fonts.googleapis.com/css?family=Germania+One" rel="stylesheet">
</head>
<body>
<!-- A logo will go here but here is some text for now -->
<H1 ID="Logo">website</H1>
<!-- The menu bar -->
<ul class="menu" ID="Menu_Bar">
<li Class="Menu_Item" ID="Home">
<a Class="Menu_Link" href="index.html">Home</a>
</li>
<li Class="Menu_Item" ID="About_Us">
<a Class="Menu_Link" href="about.html">About Us</a>
</li>
<li Class="Menu_Item" ID="Events">
<a Class="Menu_Link" href="events.html">Events</a>
</li>
<li Class="Menu_Item" ID="Contact">
<a Class="Menu_Link" href="contact.html">Contact Us</a>
</li>
</ul>
<!-- An image of the stuff-->
<img ID="theGang" src="assets/thegang.png"/>
</body>
</html>
Here is the JQuery.
$(document).ready(function(){
$("button").click(function(){
$("#theGang").fadeIn(3000);
alert("it worked");
});
});
I'm just not sure why it's not working.
By the way the javascript file is in a sub folder called js and called main.js and the html is called index.html
Based on your comments it looks like all you needed to do was remove the event handler for the nonexistent button element. This enables the fadeIn and alert.
$(document).ready(function(){
$("#theGang").fadeIn(3000);
//alert("it worked");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- A logo will go here but here is some text for now -->
<H1 ID="Logo">website</H1>
<!-- The menu bar -->
<ul class="menu" ID="Menu_Bar">
<li Class="Menu_Item" ID="Home">
<a Class="Menu_Link" href="index.html">Home</a>
</li>
<li Class="Menu_Item" ID="About_Us">
<a Class="Menu_Link" href="about.html">About Us</a>
</li>
<li Class="Menu_Item" ID="Events">
<a Class="Menu_Link" href="events.html">Events</a>
</li>
<li Class="Menu_Item" ID="Contact">
<a Class="Menu_Link" href="contact.html">Contact Us</a>
</li>
</ul>
<!-- An image of the stuff-->
<img ID="theGang" src="https://image.freepik.com/free-photo/cute-cat-picture_1122-449.jpg" style="display: none;"/>
I have a header with dropdown menu on my home page but if i put the header div into another html file and after that if i include it in my home page using jquery load function than the drop-down menu is not working.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="stylesheet" type="text/css" href="css/font-awesome.css"/>
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
</head>
<body>
<div id="myid">
</div>
<script>
$(function(){
$("#myid").load("header.html");
});
</script>
<script src="js/cbpHorizontalMenu.js"></script>
<script>
$(function() {
cbpHorizontalMenu.init();
cbpHorizontalMenu1.init();
});
</script>
</body>
</html>
*****The header content*****
<header class="header">
<div class="layout">
<div class="top-header">
<div class="top-right">
<div class="nav-toggler">
<button class="toggle-link hidden-bar-opener" data-pixel=".top-menu">Top Menu</button>
</div>
<div class="layout">
<div class="top-menu cbp-hrmenu1">
<ul>
<li><span class="fa fa-plus"></span> Our Services
<div class="service-drop cbp-hrsub">
<div class="cbp-hrsub-inner">
<ul>
<li>football</li>
<li>cricket</li>
<li>hockey</li>
</ul>
</div>
</div>
</li>
<li>
<span class="fa fa-plus"></span> Contact Us
<div class="service-drop cbp-hrsub">
<div class="cbp-hrsub-inner">
<ul>
<li><i class="fa fa-phone-square" aria-hidden="true"></i> +91-99863355333</li>
<li><i class="fa fa-whatsapp" aria-hidden="true"></i> +91-124382428</li>
<li><i class="fa fa-skype" aria-hidden="true"></i> skype</li>
<li><i class="fa fa-envelope" aria-hidden="true">mail me </i></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="main-menu">
<div class="layout">
<div class="nav-toggler">
<button class="toggle-link hidden-bar-opener" data-pixel=".main-menu1"><i class="fa fa-bars"></i></button>
</div>
<nav class="main-menu1 cbp-hrmenu">
<ul>
<li>
Category one
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<ul>
<li>test </li>
<li>test </li>
<li>test </li>
<li>test </li>
<li>test</li>
</ul>
</div>
</div><!-- /cbp-hrsub-inner -->
</div><!-- /cbp-hrsub -->
</li>
<li>
Category two
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<ul>
<li>test 2</li>
<li>test 2</li>
<li>test 2</li>
<li>test 2</li>
<li>test 2</li>
</ul>
</div>
</div><!-- /cbp-hrsub-inner -->
</div><!-- /cbp-hrsub -->
</li>
</ul>
</nav>
</div>
</div>
</header>
if i copy the content of header in the div than it is working fine. But i want to include it on every page of my site.
Here is the live example http://plnkr.co/edit/51vGFoI7aJF1HUE3Wim9
The issue is because the content is loaded asynchronously, and you try an initialise the menu before it's in the DOM. You need to instead put the initialisation in the callback of load(). Try this:
<head>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="stylesheet" type="text/css" href="css/font-awesome.css"/>
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
<script src="js/cbpHorizontalMenu.js"></script>
<script>
$(function(){
$("#myid").load("header.html", function() {
cbpHorizontalMenu.init();
cbpHorizontalMenu1.init();
});
});
</script>
</head>
<body>
<div id="myid"></div>
</body>
if it's in PHP you can name it like header.php
2.then include it <? include('header.php'); ?>
put that line of code in the top or where div you want
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.
I'm trying to create a simple page where when I click on one tabbed item should let display disappear for that page. In this simple code, when I click on About should let product dropdown menu disappear. Here is the code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Drop Down Navbar</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="span12">
<h3>Bootstrap Dropdown Menu By Creativity-Tuts</h3>
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li>Home</li>
<li>About</li>
</ul>
</div>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"> Products <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Prod 1</li>
<li>Prod 2</li>
<li>Prod 3</li>
<li>Prod 4</li>
</ul>
</li>
</div>
</div>
</div>
</div>
</body>
</html>
Am I going use onClick and call a function to hide that drop down menu? Here is the jsfiddle link
add id to «about» link, then use such code:
$('#about').click(function(){
$('.dropdown-menu').hide();
});