I'm trying to use foundation to build a navigation menu. The black bar loads with my content, but some features don't work. For example, the drop down menu doesn't work when the mouse hovers over it. Also the proper mouseover effects arent working. Am I forgetting something?
http://jsfiddle.net/Sbt75/755/
Here is my code
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<!--Jquery-->
<script src="js/jquery-1.11.2.min.js" type="text/javascript"></script>
<!--Foundation-->
<script src="js/foundation.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/foundation.css" type="text/css" />
<link rel="stylesheet" href="css/normalize.css" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="contain-to-grid sticky">
<nav class="top-bar" role="navigation" data-options="is_hover: true">
<ul class="title-area">
<li class="name">
<h1>VoIP Innovations</h1>
</li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li class="has-dropdown">
Services
<ul class="dropdown">
<li>Origination</li>
<li>Termination</li>
<li>E911</li>
<li>Hosted Billing</li>
</ul>
</li>
<li>Nav 2</li>
<li>Nav 3</li>
<li>Nav 4</li>
<li>Nav 5</li>
</ul>
</section>
</nav>
</div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
<script>
$(document).foundation();
</script>
Here is working Fiddle.
Firstly, you have to put data-topbar attribute into your nav element.
Secondly, you have to put li with menu into your code:
<li class="toggle-topbar menu-icon">
<a href="#">
<span>Menu</span>
</a>
</li>
Whole HTML:
<nav class="top-bar" data-topbar role="navigation" data-options="is_hover: true">
<ul class="title-area">
<li class="name">
<h1>
VoIP Innovations
</h1>
</li>
<li class="toggle-topbar menu-icon">
<a href="#">
<span>Menu</span>
</a>
</li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li class="has-dropdown">
Services
<ul class="dropdown">
<li>
Origination
</li>
<li>
Termination
</li>
<li>
E911
</li>
<li>
Hosted Billing
</li>
</ul>
</li>
<li>
Nav 2
</li>
<li>
Nav 3
</li>
<li>
Nav 4
</li>
<li>
Nav 5
</li>
</ul>
</section>
</nav>
Hey I think you are missing one atribute, before role="navigation" on the nav tag, add data-topbar
so it would look like this
<nav class="top-bar" data-topbar role="navigation" data-options="is_hover: true">
Haven't found anything else missing
Here is the way that the foundation documents use:
<nav class="top-bar" data-topbar role="navigation">
Try changing your nav tag out with this and let me know what happens.
Related
I have been trying to create a responsive Navbar that works on both mobile and pc. but it does not seems to work.
<nav class="uk-container uk-navbar">
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li class="uk-active">
UIKit<strong>Nav</strong>
</li
</ul>
</div>
<div class="uk-navbar-right">
<ul class="uk-navbar-nav uk-visible#s">
<li><a class="uk-text-large" #">about</a></li>
<li><a class="uk-text-large" href="#">blog</a></li>
</ul>
<a href="#" class="uk-navbar-toggle uk-hidden#s" uk-navbar-
toggle-icon uk-toggle="target: #sidenav">MENU</a>
</div>
</nav>
<div id="sidenav" uk-offcanvas="overlay: true; mode: push; flip: true"
class="uk-offcanvas">
<div class="uk-offcanvas-bar">
<ul class="uk-nav">
<li><a class="uk-text-large" #">about</a></li>
<li><a class="uk-text-large" href="#">blog</a></li>
</ul>
</div>
</div>
the menu icon does not seems to open mobile nav
Maybe it's just invalid HTML markup? In my example code snippet it works just fine
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.6/css/uikit.min.css" />
<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.6/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.6/js/uikit-icons.min.js"></script>
<nav class="uk-container uk-navbar">
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li class="uk-active">
UIKit<strong>Nav</strong>
</li>
</ul>
</div>
<div class="uk-navbar-right">
<ul class="uk-navbar-nav uk-visible#s">
<li><a class="uk-text-large" href="#">about</a></li>
<li><a class="uk-text-large" href="#">blog</a></li>
</ul>
MENU
</div>
</nav>
<div id="sidenav" uk-offcanvas="overlay: true; mode: push; flip: true" class="uk-offcanvas">
<div class="uk-offcanvas-bar">
<ul class="uk-nav">
<li><a class="uk-text-large" href="#">about</a></li>
<li><a class="uk-text-large" href="#">blog</a></li>
</ul>
</div>
</div>
Working on an Angular SPA whereby am using bootstrap as my css framework. I have created different components and included them in the main app.component.html file. All are aligned properly except the bootstrap 4 sidebar,, I need it to be fixed and should be on the far-left of the screen.
The problem is that it pushes the main body down..
<!--Include Navbar which works well-->
<app-navbar></app-navbar>
<div class="container">
<!-- include sidebar-->
<app-sidebar></app-sidebar>
<router-outlet></router-outlet>
</div>
<div class="wrapper">
<!-- Sidebar -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Bootstrap Sidebar</h3>
</div>
<ul class="list-unstyled components">
<p>Dummy Heading</p>
<li class="active">
Home
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
Home 1
</li>
<li>
Home 2
</li>
<li>
Home 3
</li>
</ul>
</li>
<li>
About
</li>
<li>
Pages
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>
Page 1
</li>
<li>
Page 2
</li>
<li>
Page 3
</li>
</ul>
</li>
<li>
Portfolio
</li>
<li>
Contact
</li>
</ul>
</nav>
</div>
I'm using materialize as a UI framework in my rails app, and everything is working correctly except the 'material-icons' 'menu' option isn't working properly.
The full code is further below, but this is the piece that is not working appropriately:
<i class="material-icons">menu</i>
Instead of turning into a hamburger icon, when I shrink the browser to trigger the responsiveness, it just displays the text node 'menu'. I can't figure out what I am doing wrong. Everything else is working.
This is the entire nav/dropdown structure:
<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
<li>My Profile</li>
<li>My Courses</li>
<li class="divider"></li>
<li>Logout</li>
</ul>
<!-- Dropdown Structure -->
<ul id="dropdown2" class="dropdown-content">
<li>My Profile</li>
<li>My Courses</li>
<li class="divider"></li>
<li>Logout</li>
</ul>
<header>
<nav class="z-depth-2">
<div class="container">
<div class="nav-wrapper">
OppSim
<i class="material-icons">menu</i>
<ul class="right hide-on-med-and-down">
<!-- web view -->
<li>Courses</li>
<li>Signup</li>
<li>Login</li>
<!-- Dropdown Trigger -->
<li><a class="dropdown-button" href="#!" data-activates="dropdown1">JTB<i class="material-icons right"></i></a></li>
</ul>
<ul class="side-nav" id="mobile-demo">
<!-- mobile view -->
<li>Courses</li>
<li>Signup</li>
<li>Login</li>
<!-- Dropdown Trigger -->
<li><a class="dropdown-button" href="#!" data-activates="dropdown2">JTB<i class="material-icons right"></i></a></li>
</ul>
</div>
</div>
</nav>
</header>
Or maybe I should stick with golf.
To use icons in materalize you have to include this font
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
as per their official documentation here
I have moved some buttons around on my navbar, and now it isn't filling the container width fully.
<div class="container">
<div class="header-nav-bar home-slide">
<nav>
<button><i class="fa fa-bars"></i></button>
<ul class="primary-nav list-unstyled">
<li class="bg-color">Home</li>
<li class="">Company</li>
<li>Price</li>
<li>About Us</li>
<li>Contact Us</li>
<li>FAQ</li>
<li>Terms</li>
</ul>
</nav>
</div>
</div>
I have tried to use "container-fluid" however there doesn't appear to be anything that has changed regarding width of the buttons.
The size of the container which the buttons are meant to fill evenly is 1140px in width on a 1920 x 1080 monitor.
Thanks for your time.
Are you looking for this? Otherwise reply me.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button> <i class="fa fa-bars"></i></button>
</div>
<div>
<ul class="nav navbar-nav">
<li class="bg-color">Home<i class="fa fa-angle-down"></i>
<li>Home</li>
</li>
<li class="">Company<i class="fa fa-angle-down"></i>
<li>Newsletter</li>
</li>
<li>Search Page</li>
<li> Blog<i class="fa fa-angle-down"></i>
<li>Blog list</li>
<li>Blog-post</li>
<li>Price</li>
<li>About Us</li>
<li>Contact Us</li>
</div>
</div>
</nav>
</body>
</html>
I'm trying to use Twitter Bootstrap's dropdown menu in its top nav bar. You can see an example working here. http://twitter.github.com/bootstrap/#
In mine, the arrow indicating that it's a dropdown shows on the menu but when I hover or click on it it doesn't reveal my dropdown links. I think I've included all the necessary classes, and I don't believe Twitter's requires javascript.
Can you see what I'm doing wrong?
My dropdown
<div class='topbar' data-dropdown="dropdown">
<div class='fill'>
<div class='container'>
<ul class="nav">
<li><%= link_to 'Home', main_app.root_path %></li>
<li><%= link_to 'Outlines', main_app.outlines_path %></li>
<li class="dropdown">
Assessment
<ul class="dropdown-menu">
<li>second link </li>
<li>third link </li>
</ul>
</li>
..... I go on to close all the divs etc. The nav bar looks great but the dropdown just doesn't work.
Twitter Bootstrap
<div class="topbar" data-dropdown="dropdown">
<div class="topbar-inner">
<div class="container">
<h3>Project Name</h3>
<ul class="nav">
<li class="active">Home</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown
<ul class="dropdown-menu">
<li>Secondary link</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Another link</li>
</ul>
</li>
</ul>
<form class="pull-left" action="">
<input type="text" placeholder="Search">
</form>
<ul class="nav secondary-nav">
<li class="dropdown">
Dropdown
<ul class="dropdown-menu">
<li>Secondary link</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Another link</li>
</ul>
</li>
</ul>
</div>
</div><!-- /topbar-inner -->
</div>
It actually requires inclusion of Twitter Bootstrap's dropdown.js
http://getbootstrap.com/2.3.2/components.html
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>
It's also possible to customise your bootstrap build by using:
http://twitter.github.com/bootstrap/customize.html
All the plugins are included by default.
You must include jQuery in the project.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
I didn't find any doc about this so I just opened a random code example from tutorialrepublic.com
http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-dropdowns.php
Hope this helps someone else.
I had a similar problem and it was the version of bootstrap.js included in my visual studio project. I linked to here and it worked great
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- core CSS -->
<link href="http://webdesign9.in/css/bootstrap.min.css" rel="stylesheet">
<link href="http://webdesign9.in/css/font-awesome.min.css" rel="stylesheet">
<link href="http://webdesign9.in/css/responsive.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head><!--/head-->
<body class="homepage">
<header id="header">
<nav class="navbar navbar-inverse" role="banner">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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>
<a class="navbar-brand" title="Web Design Company in Mumbai" href="index.php"><img src="images/logo.png" alt="The Best Web Design Company in Mumbai" /></a>
</div>
<div class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About Us</li>
<li>Services</li>
<li>Terms & Condition</li></li>
<li>Contact</li>
</ul>
</div>
</div><!--/.container-->
</nav><!--/nav-->
</header><!--/header-->
<script src="http://webdesign9.in/js/jquery.js"></script>
<script src="http://webdesign9.in/js/bootstrap.min.js"></script>
</body>
</html>