I am using Google's MDL.
I need to have a right aligned hamburger. By default the icon appears on top left.
This the code from MDL page:
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Title</span>
<!-- Add spacer, to align navigation to the right -->
<div class="mdl-layout-spacer"></div>
<!-- Navigation. We hide it in small screens. -->
<nav class="mdl-navigation mdl-layout--large-screen-only">
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Title</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
<main class="mdl-layout__content">
<div class="page-content"><!-- Your content goes here --></div>
</main>
</div>
I tried changing the direction of div tagss but that didn't help. It is still on the left.
Related
I am trying to implement AdminLTE theme in my project. I am an intern and working with jsf+hibernate. I have been told to use adminlte theme and trying to work it out with jsf.
At the beginning I fixed the stylesheeet syntax and JS syntax. After that fixed the /> parts of the code to apply on JSF. Now everything is looking same except icons. I am trying to implement them same way as I implemented JS and CSS files but it does not work.
For example, code was:
<link rel="stylesheet" href="dist/css/adminlte.min.css">
and I am using it like:
<h:outputStylesheet library="dist/css" name="adminlte.min.css" />
It works when I'm use:
<h:graphicImage name ="dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3" style="opacity: .8"/>
instead of:
<img src="dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3" style="opacity: .8"/>
Icons look like this:
My template.xhtml:
<!DOCTYPE html>
<!--
This is a starter template page. Use this page to start your new project from
scratch. This page gets rid of all links and provides the needed markup only.
-->
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<h:head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>AdminLTE 3 | Starter</title>
<!-- Google Font: Source Sans Pro -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback"/>
<h:outputStylesheet library="plugins/fontawesome-free/css" name="all.min.css" />
<h:outputStylesheet library="dist/css" name="adminlte.min.css" />
</h:head>
<h:body class="hold-transition sidebar-mini">
<div class="wrapper">
<!-- Navbar -->
<nav class="main-header navbar navbar-expand navbar-white navbar-light">
<!-- Left navbar links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
</li>
<li class="nav-item d-none d-sm-inline-block">
Home
</li>
<li class="nav-item d-none d-sm-inline-block">
Contact
</li>
</ul>
<!-- Right navbar links -->
<ul class="navbar-nav ml-auto">
<!-- Navbar Search -->
<li class="nav-item">
<a class="nav-link" data-widget="navbar-search" href="#" role="button">
<i class="fas fa-search"></i>
</a>
<div class="navbar-search-block">
<form class="form-inline">
<div class="input-group input-group-sm">
<input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search"/>
<div class="input-group-append">
<button class="btn btn-navbar" type="submit">
<i class="fas fa-search"></i>
</button>
<button class="btn btn-navbar" type="button" data-widget="navbar-search">
<i class="fas fa-times"></i>
</button>
</div>
</div>
</form>
</div>
</li>
<!-- Messages Dropdown Menu -->
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">
<i class="far fa-comments"></i>
<span class="badge badge-danger navbar-badge">3</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="media">
<h:graphicImage name ="dist/img/user1-128x128.jpg" alt="User Avatar" class="img-size-50 mr-3 img-circle"/>
<div class="media-body">
<h3 class="dropdown-item-title">
Brad Diesel
<span class="float-right text-sm text-danger"><i class="fas fa-star"></i></span>
</h3>
<p class="text-sm">Call me whenever you can...</p>
<p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
</div>
</div>
<!-- Message End -->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="media">
<h:graphicImage name ="dist/img/user8-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3"/>
<div class="media-body">
<h3 class="dropdown-item-title">
John Pierce
<span class="float-right text-sm text-muted"><i class="fas fa-star"></i></span>
</h3>
<p class="text-sm">I got your message bro</p>
<p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
</div>
</div>
<!-- Message End -->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="media">
<h:graphicImage name ="dist/img/user3-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3"/>
<div class="media-body">
<h3 class="dropdown-item-title">
Nora Silvester
<span class="float-right text-sm text-warning"><i class="fas fa-star"></i></span>
</h3>
<p class="text-sm">The subject goes here</p>
<p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
</div>
</div>
<!-- Message End -->
</a>
<div class="dropdown-divider"></div>
See All Messages
</div>
</li>
<!-- Notifications Dropdown Menu -->
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">
<i class="far fa-bell"></i>
<span class="badge badge-warning navbar-badge">15</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
<span class="dropdown-header">15 Notifications</span>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fas fa-envelope mr-2"></i> 4 new messages
<span class="float-right text-muted text-sm">3 mins</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fas fa-users mr-2"></i> 8 friend requests
<span class="float-right text-muted text-sm">12 hours</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fas fa-file mr-2"></i> 3 new reports
<span class="float-right text-muted text-sm">2 days</span>
</a>
<div class="dropdown-divider"></div>
See All Notifications
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-widget="fullscreen" href="#" role="button">
<i class="fas fa-expand-arrows-alt"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#" role="button">
<i class="fas fa-th-large"></i>
</a>
</li>
</ul>
</nav>
<!-- /.navbar -->
<!-- Main Sidebar Container -->
<aside class="main-sidebar sidebar-dark-primary elevation-4">
<!-- Brand Logo -->
<a href="index3.html" class="brand-link">
<h:graphicImage name="dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3" style="opacity: .8"/>
<span class="brand-text font-weight-light">PM System</span>
</a>
<!-- Sidebar -->
<div class="sidebar">
<!-- Sidebar user panel (optional) -->
<div class="user-panel mt-3 pb-3 mb-3 d-flex">
<div class="image">
<h:graphicImage name ="dist/img/user2-160x160.jpg" class="img-circle elevation-2" alt="User Image"/>
</div>
<div class="info">
Kullanıcı Adı
</div>
</div>
<!-- SidebarSearch Form -->
<div class="form-inline">
<div class="input-group" data-widget="sidebar-search">
<input class="form-control form-control-sidebar" type="search" placeholder="Search" aria-label="Search"/>
<div class="input-group-append">
<button class="btn btn-sidebar">
<i class="fas fa-search fa-fw"></i>
</button>
</div>
</div>
</div>
<!-- Sidebar Menu -->
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<!-- Add icons to the links using the .nav-icon class
with font-awesome or any other icon font library -->
<li class="nav-item menu-open">
<a href="#" class="nav-link active">
<i class="nav-icon fas fa-tachometer-alt"></i>
<p>
Starter Pages
<i class="right fas fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="#" class="nav-link active">
<i class="far fa-circle nav-icon"></i>
<p>Active Page</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Inactive Page</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-th"></i>
<p>
Simple Link
<span class="right badge badge-danger">New</span>
</p>
</a>
</li>
</ul>
</nav>
<!-- /.sidebar-menu -->
</div>
<!-- /.sidebar -->
</aside>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<div class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1 class="m-0">Starter Page</h1>
</div><!-- /.col -->
<div class="col-sm-6">
<ol class="breadcrumb float-sm-right">
<li class="breadcrumb-item">Home</li>
<li class="breadcrumb-item active">Starter Page</li>
</ol>
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.container-fluid -->
</div>
<!-- /.content-header -->
<!-- Main content -->
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's
content.
</p>
Card link
Another link
</div>
</div>
<div class="card card-primary card-outline">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's
content.
</p>
Card link
Another link
</div>
</div><!-- /.card -->
</div>
<!-- /.col-md-6 -->
<div class="col-lg-6">
<div class="card">
<div class="card-header">
<h5 class="m-0">Featured</h5>
</div>
<div class="card-body">
<h6 class="card-title">Special title treatment</h6>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
<div class="card card-primary card-outline">
<div class="card-header">
<h5 class="m-0">Featured</h5>
</div>
<div class="card-body">
<h6 class="card-title">Special title treatment</h6>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
<!-- /.col-md-6 -->
</div>
<!-- /.row -->
</div><!-- /.container-fluid -->
</div>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
<!-- Control sidebar content goes here -->
<div class="p-3">
<h5>Title</h5>
<p>Sidebar content</p>
</div>
</aside>
<!-- /.control-sidebar -->
<!-- Main Footer -->
<footer class="main-footer">
<!-- To the right -->
<div class="float-right d-none d-sm-inline">
Anything you want
</div>
<!-- Default to the left -->
<strong>Copyright © 2014-2021 AdminLTE.io.</strong> All rights reserved.
</footer>
</div>
<!-- ./wrapper -->
<!-- REQUIRED SCRIPTS -->
<h:outputScript library="plugins/jquery" name="jquery.min.js"/>
<h:outputScript library="plugins/bootstrap/js" name="bootstrap.bundle.min.js"/>
<h:outputScript library="dist/js" name="adminlte.min.js"/>
</h:body>
</html>
can you try font awsome like this:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
I m using Clarity Design System with angular and the top menu is not mobile response
<header class="header-2">
<div class="branding">
<a class="nav-link">
<clr-icon shape="home" size="24"></clr-icon>
<span class="title">title</span>
</a>
</div>
<div class="header-nav">
<a class="nav-link nav-text" routerLink="/home">Home</a>
<a class="active nav-link nav-text"
routerLink="/login">Login</a>
</div>
</header>
I m expecting the top menu to turn into few lines (button) when the width is reduce
Or should I use different tags ?
To use responsive navigation, see the documentation on it at https://v2.clarity.design/navigation. You need to use the clr-main-container and clr-header elements to enable this behavior.
Given your markup, it should be something like the following.
<clr-main-container>
<clr-header class="header-2">
<div class="branding">
<a class="nav-link">
<clr-icon shape="home" size="24"></clr-icon>
<span class="title">title</span>
</a>
</div>
<div class="header-nav" [clr-nav-level]="1">
<a class="nav-link nav-text" routerLink="/home">Home</a>
<a class="active nav-link nav-text" routerLink="/login">Login</a>
</div>
</clr-header>
<div class="content-container">
<main class="content-area">
... the main body content goes here, probably a router-outlet
</main>
<nav class="sidenav" [clr-nav-level]="2">
... if you want a sidenav that is, or omit this
</nav>
</div>
</clr-main-container>
Yes it is working perfect now, it solved the behavior
So now is:
<clr-main-container>
<clr-header class="header-2">
<div class="branding">
<a class="nav-link">
<clr-icon shape="home" size="24"></clr-icon>
<span class="title">{{title}}</span>
</a>
</div>
<div class="header-nav" [clr-nav-level]="1">
<div class="header-nav">
<a class="nav-link nav-text" routerLink="/home">Home</a>
<a class="active nav-link nav-text" routerLink="/login">Login</a>
</div>
</div>
</clr-header>
Thank you very much
I'm trying to implement this mobile layout using the Bulma CSS Framework (the red header and the blue footer are both fixed) :
Here is the corresponding code :
<nav class="navbar is-danger is-fixed-top" role="navigation">
<div class="navbar-brand">
<a class="navbar-item" href="index.php">
<img src="http://via.placeholder.com/28x28" width="28" height="28">
</a>
<div class="navbar-burger burger">
<span></span>
<span></span>
<span></span>
</div>
</div>
</nav>
<nav class="navbar is-link is-fixed-bottom" role="navigation">
<div class="navbar-brand">
<a class="navbar-item is-expanded">
<i class="fa fa-user"></i>
<p class="is-size-7">Account</p>
</a>
<a class="navbar-item is-expanded">
<i class="fa fa-list"></i>
<p class="is-size-7">Tasks</p>
</a>
<a class="navbar-item is-expanded">
<i class="fa fa-flag"></i>
<p class="is-size-7">Alerts</p>
</a>
<a class="navbar-item is-expanded">
<i class="fa fa-cog"></i>
<p class="is-size-7">Settings</p>
</a>
</div>
</nav>
<div class="section">
<h1>Content</h1>
<p>Lorem ipsum dolor sit amet...</p>
</div>
Header : is there a way to display a left side burger, a
centered logo and a right side icon ?
Footer : is there a class to display icons and text on top of each other instead of side by side ?
Is this mockup achievable out of the box ? I do not mind doing it manually in CSS but since this mobile layout seems pretty common I was hoping that there would be a natural way to do it.
Is this mockup achievable out of the box?
Yes and No.
You will need to do a small bit of HTML restructuring and add a few lines of CSS to move the burger to the left side.
The layout for the footer can be achieved using Bulma modifier classes.
fiddle
Solution
Header
<div class="navbar-brand">
<div class="navbar-burger burger">
<span></span>
<span></span>
<span></span>
</div>
<a class="navbar-item" href="index.php">
<img src="...">
</a>
</div>
Switch the order of elements in .navbar-brand - The burger comes first, the logo second.
Add the following CSS
.navbar-burger {
margin-left: 0;
margin-right: auto;
}
Footer
Add the .is-block and has-text-centered modifying classes to .navbar-item:
<a class="navbar-item is-expanded is-block has-text-centered">
<i class="fa fa-user"></i>
<p class="is-size-7">Account</p>
</a>
For more info, see here and here
Snippet
js added to make menu functional in demo
// Get all "navbar-burger" elements
var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
// Check if there are any navbar burgers
if ($navbarBurgers.length > 0) {
// Add a click event on each of them
$navbarBurgers.forEach(function($el) {
$el.addEventListener('click', function() {
// Get the target from the "data-target" attribute
var target = $el.dataset.target;
var $target = document.getElementById(target);
// Toggle the class on both the "navbar-burger" and the "navbar-menu"
$el.classList.toggle('is-active');
$target.classList.toggle('is-active');
});
});
}
.navbar-burger {
margin-left: 0 !important;
margin-right: auto;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<nav class="navbar is-danger is-fixed-top" role="navigation">
<div class="navbar-brand">
<div class="navbar-burger burger" data-target="navMenu">
<span></span>
<span></span>
<span></span>
</div>
<a class="navbar-item" href="index.php">
<img src="https://via.placeholder.com/28x28" width="28" height="28">
</a>
</div>
<div class="navbar-menu" id="navMenu">
<div class="navbar-start">
<a class="navbar-item">Example 1</a>
<a class="navbar-item">Example 2</a>
<a class="navbar-item">Example 3</a>
</div>
<div class="navbar-end">
</div>
</div>
</nav>
<nav class="navbar is-link is-fixed-bottom" role="navigation">
<div class="navbar-brand">
<a class="navbar-item is-expanded is-block has-text-centered">
<i class="fa fa-user"></i>
<p class="is-size-7">Account</p>
</a>
<a class="navbar-item is-expanded is-block has-text-centered">
<i class="fa fa-list"></i>
<p class="is-size-7">Tasks</p>
</a>
<a class="navbar-item is-expanded is-block has-text-centered">
<i class="fa fa-flag"></i>
<p class="is-size-7">Alerts</p>
</a>
<a class="navbar-item is-expanded is-block has-text-centered">
<i class="fa fa-cog"></i>
<p class="is-size-7">Settings</p>
</a>
</div>
</nav>
<div class="section">
<h1>Content</h1>
<p>Lorem ipsum dolor sit amet...</p>
</div>
I basically want this welearn2fly.com where half the navbar will overlap my carousel & when mobile screen size is reached I want it to become 100% width. I've had a go but cant get it to overlap or stay under each other whilst being responsive.
Any help? Thanks
Currently this is my code:
CSS & HTML: https://jsfiddle.net/ryqvybde/
<div id="header">
<div class="container">
<div id="logo">
<img src="images/logo1.png" alt="lolalogo" class="image-responsive">
</div>
<!-- End logo -->
<!-- Navigation -->
<nav class="navbar navbar-inverse" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
</div>
<!-- End Header -->
<!-- Full Page Image Background Carousel Header -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/slide1.jpg" alt="Chania">
</div>
<div class="item">
<img src="images/slide2.jpg" alt="Chania">
</div>
<div class="item">
<img src="images/slide3.jpg" alt="Flower">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
How can I make submenu items in the navigation?
<!-- Navigation -->
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
</nav>
I can't use <ul> <li> with it. What is the correct class?
MDL doesn't seem to support sub menus natively just yet.
However there are classes for menus you can use as sub menus:
http://www.getmdl.io/components/index.html#menus-section
So in your code you might look like this:
<!-- Left aligned menu below button -->
<nav class="mdl-navigation">
<a id="submenu" class="mdl-navigation__link" href="#">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
</nav>
<!-- sub menu only visible when clicked on the link above -->
<ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect"
for="submenu">
<li class="mdl-menu__item">Some Action</li>
<li class="mdl-menu__item">Another Action</li>
<li disabled class="mdl-menu__item">Disabled Action</li>
<li class="mdl-menu__item">Yet Another Action</li>
</ul>
Make sure to have # inside your href.
if you use also angular.js:
<nav class="mdl-navigation">
<!-- link -->
<a ng-click="showme = ! showme" class="mdl-navigation__link" href="#">Link</a>
<!-- sub menu -->
<nav class="mdl-navigation" ng-show="showme">
<a class="mdl-navigation__link">Sublink 1</a>
<a class="mdl-navigation__link">Sublink 2</a>
</nav>
</nav>
if you dont use angular.js, but classic jquery, you can do it in that way:
<nav class="mdl-navigation">
<!-- link -->
Link
<!-- sub menu -->
<nav id="submenu" class="mdl-navigation">
<a class="mdl-navigation__link">Sublink 1</a>
<a class="mdl-navigation__link">Sublink 2</a>
</nav>
</nav>
<script>
$(document).ready(function() {
$("#mainlink").click(function() {
$('#submenu').toggle('show');
});
});
</script>