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>
Related
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
Here is the code:
<ul id="gn-menu" class="gn-menu-main">
<li class="gn-trigger">
<a class="gn-icon gn-icon-menu">
<div class="hamburger hamburger--arrow">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>
</a>
<nav class="gn-menu-wrapper gn-open-part">
<div class="gn-scroller">
<ul class="gn-menu">
<li><a class="gn-icon" id="calendar" href="http://remindbuddy.com/main.php">Calendar</a>
</li>
<li>
<a class="gn-icon self" href="http://remindbuddy.com/self.php">Add For Self</a>
</li>
<li><a class="gn-icon events" href="http://remindbuddy.com/events.php">Events</a></li>
<li><a class="gn-icon view" href="http://remindbuddy.com/contacts.php">View Contacts</a></li>
<li>
<a class="gn-icon add" id="toggle">Add Contact</a>
<ul id="panel" style="display:none">
<li><a href="http://remindbuddy.com/professional.php" <?php if($_SESSION['pro']==0){echo 'style="pointer-events: none;"';}?>>Professional</a></li>
<li>Personal</li>
</ul>
</li>
<li><a class="gn-icon profile" href="http://remindbuddy.com/profile.php">Profile</a></li>
</ul>
</div><!-- /gn-scroller -->
</nav>
</li>
<li class="pageTitle">Profile</li>
</ul>
<span class="left" id="calendarTool">Calendar</span>
What I want is that, for hover on li#calendar to change css property of span#calendarTool.
I have tried:
#calendar:hover #calendarTool,
#calendar:hover + #calendarTool,
#calendar:hover ~ #calendarTool
But nothing seems to work.How to get this done in the given scenario.
Thanxx in advance!!
#calendar is not a sibling nor a parent of #calendarTool so you will not be able to leverage css to handle this. This will require JS/Jquery or a restructure of html so that #calendarTool is a sibling to or nested under #calendar
Quick Jquery example: JS Fiddle
$('#calendar').on('mouseover', function() {
$('#calendarTool').css('background', 'blue');
});
$('#calendar').on('mouseout', function() {
$('#calendarTool').css('background', 'transparent');
});
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.
This is my page :
<body>
<div role="main">
<div data-role="panel" id="userMenu" data-position="left" data-display="push" data-theme="g">
<ul data-role="listview" data-theme="g">
<li id="menuTxt" data-role="list-divider">Menu</li>
<li><a data-ajax="false" href="/Home">Accueil</a></li>
<li><a data-ajax="false" href="/CheckFridge">Mes ingrédients</a></li>
<li><a data-ajax="false" href="/AddRecipe">Ajouter une recette</a></li>
<li><a data-ajax="false" href="#">Déconnexion</a></li>
<li><a data-ajax="false" href="/MyRecipes">Mes recettes</a></li>
<li><a data-ajax="false" data-href="https://developers.facebook.com/docs/plugins/">Partager</a></li>
</ul>
</div>
<div data-role="header">
<a id="menuBtn" href="#userMenu"></a>
<img id="icook_logo" src="~/Content/images/icook_logo.jpg" />
</div>
<div data-role="ui-content">
<a data-role="button" href="#Url.Action("Index", "CheckFridge")" data-theme="c" data-ajax="false" id="checkFridgeBtn">Check mon frigo</a>
<a data-role="button" data-theme="c" id="classicSearch">Recherche classique</a>
</div>
</div>
</body>
The problem when I click on the button sitting on the top-left of the page, the rest of the page doesn't move to the right in spite of that the attribute "data-position" is equals to "left"
Can you help me ?
Thank you
To build nav tabs via Bootstrap, it's simple, I just add code:
<ul class="nav nav-tabs">
<li class="active">
Home
</li>
<li>Tab1</li>
<li>Tab2</li>
</ul>
http://jsfiddle.net/M4YZ6/
but it's only top part of the tabs, who knows how to build bottom part using bootstrap like on picture below:
Thanks a lot!
try this
http://jsfiddle.net/M4YZ6/5/
HTML
<div class="tabbable">
<ul class="nav nav-tabs" id="myTab">
<li class="active">
<a data-original-title="" rel="tooltip" href="#tab1" data-toggle="tab">Home</a>
</li>
<li><a data-original-title="" rel="tooltip" href="#tab2" data-toggle="tab">Profile</a></li>
<li><a data-original-title="" rel="tooltip" href="#tab3" data-toggle="tab">Message</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="tab1">
Home
</div>
<div class="tab-pane" id="tab2">
Profile
</div>
<div class="tab-pane" id="tab3">
Message
</div>
</div>
</div>
I believe Tabbable nav is what you are looking for,
<div class="tabbable"> <!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li class="active">Section 1</li>
<li>Section 2</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>Howdy, I'm in Section 2.</p>
</div>
</div>
</div>
Markup taken from the nav component documentation
===Edit===
Js fiddle