I know that this can be done if the navigation bar used basic html. How can the navbar be stretched to the full width using uikit ?
My navbar code :
<nav class="uk-navbar">
Web
<ul class="uk-navbar-nav">
<li>Home</li>
<li>Contact Us</li>
</ul>
</nav>
I've just reproduced your example and it's working fine: http://codepen.io/untmat/pen/JKgZLw
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.26.4/css/uikit.min.css" />
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.26.4/css/uikit.min.css"></script>
<nav class="uk-navbar">
Web
<ul class="uk-navbar-nav">
<li>Home</li>
<li>Contact Us</li>
</ul>
</nav>
Maybe you haven't added uikit.css, jquery.js and uikit.js properly?
Related
I am trying to use MaterializeCSS Icon to work on the navbar. In the code posted, arrow-drop_down doesn't seem to work. Instead, it shows just a text. Icons render on other pages except in the app.component.html file.
I tried to import the below code directly in the index.html file. Still the same result. Am I missing something here? Also, I cannot figure out a reason why Icons display in any other component apart from app.component.html
Any help would be much appreciated. Thank you. Let me know if more details are required.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>UiCommunity</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
app.component.html
<!--The content below is only a placeholder and can be replaced.-->
<header>
<nav class="white">
<div class="container nav-wrapper">
Community
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>
<a routerLink="/" routerLinkActive="active">HOME</a>
</li>
<li>
<a routerLink="/event" routerLinkActive="active">EVENTS</a>
</li>
<li *ngIf="!authenticated()">
<a routerLink="/login" routerLinkActive="active">LOGIN</a>
</li>
<li *ngIf=!authenticated()>
<a routerLink="/register" routerLinkActive="active">SIGNUP</a>
</li>
<li *ngIf=authenticated()>
<a routerLink="/logout" class="black-text">LOGOUT</a>
</li>
<li *ngIf=authenticated()>
<a routerLink="/profile" class="dropdown-trigger black-text" data-target="dropdown1">PROFILE<i class="material-icons right">arrow_drop_down</i></a>
</li>
<li>
<a class="btn waves-effect waves-lime lime darken-4 white-text">Donate</a>
</li>
</ul>
</div>
</nav>
<ul id='dropdown1' class='dropdown-content'>
<li>one</li>
<li>two</li>
<li class="divider" tabindex="-1"></li>
<li>three</li>
<li><i class="material-icons">view_module</i>four</li>
<li><i class="material-icons">cloud</i>five</li>
</ul>
</header>
<main>
<router-outlet></router-outlet>
</main>
<footer></footer>
This is my style.css
/* You can add global styles to this file, and also import other style files */
#import "../node_modules/materialize-css/dist/css/materialize.css";
#import url('https://fonts.googleapis.com/css?family=Philosopher');
#import url('https://fonts.googleapis.com/icon?family=Material+Icons');
Can you try to import your styles file directly on your app component ts/js file? If you got all the dependencies installed and it works on other pages, it is probably an importing or wrong path issue.
Hello fellow developers.. I have a problem with the foundation dropdown menu, and after quite a while of tackling the problem I search for your help, foundation gurus.
I am using foundation 6.2.4-full. I've created a dropdown menu but I noticed an issue, the problem lies when using the menu with mobile devices (try on iphone 4). It's submenu items aren't clickable. For example, click on the Map option, and then try to click on Pokemons sub-option. The code is embedded below.
I can't find the problem, I am quite new to foundation, perhaps I'm missing an important option?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="device-width=width, initial-scale=1">
<link rel="stylesheet" href="/css/foundation/foundation.min.css">
<script src="/js/jquery_2.2.4.min.js"></script>
<script src="/js/foundation/what-input.js"></script>
<script src="/js/foundation/foundation.min.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
$(document).foundation();
});
</script>
<nav class="top-bar">
<ul class="dropdown vertical medium-horizontal menu" data-dropdown-menu>
<li>Home</li>
<li class="has-submenu">
Map
<ul class="menu submenu vertical nested" data-submenu>
<li>Pokemons</li>
<li>Poke Gyms</li>
<li>Poke Stops</li>
</ul>
</li>
<li>news</li>
<li class="has-submenu">
<a>Guides</a>
<ul class="menu submenu vertical nested" data-submenu>
<li>
Game guides
</li>
<li>
Site guides
</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
This seems to work, give it a go on mobile, I think Foundation will detect mobile and turn the hover into a click, all events are in their documentation here: https://foundation.zurb.com/sites/docs/dropdown-menu.html.
Here's my example that works:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="device-width=width, initial-scale=1">
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css" rel="stylesheet"/>
</head>
<body>
<nav class="top-bar">
<ul class="dropdown vertical medium-horizontal menu" data-dropdown-menu>
<li>Home</li>
<li class="has-submenu">
Map
<ul class="menu submenu vertical nested" data-submenu>
<li>Pokemons</li>
<li>Poke Gyms</li>
<li>Poke Stops</li>
</ul>
</li>
<li>news</li>
<li class="has-submenu">
<a>Guides</a>
<ul class="menu submenu vertical nested" data-submenu>
<li>
Game guides
</li>
<li>
Site guides
</li>
</ul>
</li>
</ul>
</nav>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/js/foundation.min.js"></script>
<script>
$(document).ready(function() {
$(document).foundation();
});
</script>
</body>
</html>
I want to have a dropdown menu on my site. I got it working fine when storing the files on my server. However, I'd like to load them from a CDN. What happens when I try this though is that the CSS aspects work fine, but the JavaScript aspects don't, which means that the following HTML:
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/foundation/6.2.3/foundation.min.css">
</head>
<body>
<div class="top-bar">
<div class="top-bar-right">
<ul class="dropdown menu" data-dropdown-menu>
<li>
Dropdown menu
<ul class="menu vertical">
<li>
First dropdown link
</li>
<li>
Second dropdown link
</li>
</ul>
</li>
</ul>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/foundation/6.2.3/foundation.min.js"></script>
<script type="text/javascript">
$(document).foundation();
</script>
</body>
</html>
just produces this:
Any ideas what's wrong with this code?
A quick check at https://github.com/zurb/foundation-sites/blob/v6.3/bower.json shows that Foundation 6 supports jquery version ~ 2.2.0 so changing your JQuery version should solve your issue
$(document).foundation();
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.js"></script>
<div class="top-bar">
<div class="top-bar-right">
<ul class="dropdown menu" data-dropdown-menu>
<li>
Dropdown menu
<ul class="menu vertical">
<li>
First dropdown link
</li>
<li>
Second dropdown link
</li>
</ul>
</li>
</ul>
</div>
</div>
I am working on JQuery. Bootstrap and HTML5 in an asp.net application. I am trying to implement a simple menu in the master page. My code is like below:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<title></title>
<link href="~/Styles/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" type="text/javascript"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu
1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Submenu 1-1</li>
<li>Submenu 1-2</li>
<li>Submenu 1-3</li>
</ul>
</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>
<div class="container body-content">
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</div>
</body>
</html>
It is working fine when I am calling the "jquery.min.js" and "bootstrap.min.js" file directly from internet server as you can see in the code. But when I include the files from local machine like:
<link href="Styles/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.9.0.js" type="text/javasript"></script>
<script src="Scripts/bootstrap.min.js" type="text/javascript"></script>
sub menu is not showing.
I am not sure what is actually going on.
Any help will be thankfully accepted.
I think your problem is related to the version of jquery, so copy this
https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js
and put it in URL then right click save as ... you should save it as javascript file, and then add it to your project in the correct place
Following on from this question, I am still struggling with the Twitter Bootstrap. I've managed to get my navigation bar to appear and I'm trying to add a drop down menu to it. No matter what I try, I can't actually get the drop down part of the menu to work! Here is a screenshot of my menu.
As you can see, I have "Account Settings" which should be a drop down menu but when I click on it, no drop down options appear. Below is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<script src="#Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/bootstrap.js")" type="text/javascript"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.dropdown-toggle').dropdown();
});
</script>
<link href="#Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<a class="brand" href="#">Present Ideas</a>
<li class="active">Home</li>
<li>Blog</li>
<li>About</li>
<li>Help</li>
<li class="dropdown" id="accountmenu">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Account Settings<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Login</li>
<li>Register</li>
<li class="divider"></li>
<li>Logout</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="container-fluid">
#RenderBody()
</div>
</body>
</html>
As you can see, I'm referencing the dropdown Javascript file from Twitter. I have also tried referencing this locally which made no difference. I've also included the Javascript that I believe should hook-up the drop down menu and call into Twitter's Javascript file.
I'm at a loss as to why this isn't working
I can't see where you are including jQuery in your code. You have to include it before all your other scripts for the dropdown to work.
Here is the jQuery script from the google CDN:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
Mind it is also redundant to use this code in your example:
<script type="text/javascript" language="javascript" >
$(document).ready(function () {
$('.dropdown-toggle').dropdown();
});
</script>
Because it isn't doing anything.