Updating js plugins
This commit is contained in:
ahwelp
@@ -0,0 +1 @@
|
||||
mm.onokumus.com
|
||||
@@ -0,0 +1,5 @@
|
||||
<ul>
|
||||
<li><a href="#">ajax item 1.1</a></li>
|
||||
<li><a href="#">ajax item 1.2</a></li>
|
||||
<li><a href="#">ajax item 1.3</a></li>
|
||||
</ul>
|
||||
@@ -0,0 +1,6 @@
|
||||
<ul>
|
||||
<li><a href="#">ajax item 2.1</a></li>
|
||||
<li><a href="#">ajax item 2.2</a></li>
|
||||
<li><a href="#">ajax item 2.3</a></li>
|
||||
<li><a href="#">ajax item 2.4</a></li>
|
||||
</ul>
|
||||
@@ -0,0 +1,4 @@
|
||||
<ul>
|
||||
<li><a href="#">ajax item 3.1</a></li>
|
||||
<li><a href="#">ajax item 3.2</a></li>
|
||||
</ul>
|
||||
@@ -0,0 +1,8 @@
|
||||
<ul>
|
||||
<li><a href="#">ajax item 4.1</a></li>
|
||||
<li><a href="#">ajax item 4.2</a></li>
|
||||
<li><a href="#">ajax item 4.3</a></li>
|
||||
<li><a href="#">ajax item 4.4</a></li>
|
||||
<li><a href="#">ajax item 4.5</a></li>
|
||||
<li><a href="#">ajax item 4.6</a></li>
|
||||
</ul>
|
||||
@@ -0,0 +1,3 @@
|
||||
<ul>
|
||||
<li><a href="#">ajax item 5.1</a></li>
|
||||
</ul>
|
||||
@@ -0,0 +1,44 @@
|
||||
:root {
|
||||
--jumbotron-padding-y: 3rem;
|
||||
}
|
||||
|
||||
.jumbotron {
|
||||
padding-top: var(--jumbotron-padding-y);
|
||||
padding-bottom: var(--jumbotron-padding-y);
|
||||
margin-bottom: 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.jumbotron {
|
||||
padding-top: calc(var(--jumbotron-padding-y) * 2);
|
||||
padding-bottom: calc(var(--jumbotron-padding-y) * 2);
|
||||
}
|
||||
}
|
||||
|
||||
.jumbotron p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.jumbotron-heading {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.jumbotron .container {
|
||||
max-width: 40rem;
|
||||
}
|
||||
|
||||
footer {
|
||||
padding-top: 3rem;
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
|
||||
footer p {
|
||||
margin-bottom: .25rem;
|
||||
}
|
||||
|
||||
.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }
|
||||
|
||||
#rtlh3 small {
|
||||
transform: rotateY(180deg);
|
||||
display: inline-block;
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
|
||||
@@ -0,0 +1,55 @@
|
||||
.wrap {
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.sidebar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
border-right: 1px solid #b5b5b5;
|
||||
}
|
||||
.nav-mini {
|
||||
width: 50px;
|
||||
}
|
||||
.nav-mini ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
background: #fbfbfb;
|
||||
}
|
||||
.nav-mini li {
|
||||
position: relative;
|
||||
}
|
||||
.nav-mini li, .nav-mini a {
|
||||
display: block;
|
||||
}
|
||||
.nav-mini a {
|
||||
padding: 10px 5px;
|
||||
text-decoration: none;
|
||||
color: #808080;
|
||||
}
|
||||
.nav-mini a .title {
|
||||
display: none;
|
||||
}
|
||||
.nav-mini .metismenu .collapse, .nav-mini .metismenu .collapsing {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
min-width: 160px;
|
||||
}
|
||||
.nav-mini .metismenu .collapse .collapse, .nav-mini .metismenu .collapse .collapsing {
|
||||
left: 0;
|
||||
top: auto;
|
||||
}
|
||||
.nav-mini .metismenu > li {
|
||||
border-bottom: 1px solid #b5b5b5;
|
||||
}
|
||||
.nav-mini .metismenu > li > a {
|
||||
text-align: center;
|
||||
}
|
||||
.content {
|
||||
padding-left: 60px;
|
||||
background: #fff;
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
.faq-link {
|
||||
cursor: pointer;
|
||||
padding: 15px;
|
||||
background: #212529;
|
||||
color: #adb5bd
|
||||
}
|
||||
|
||||
.faq-item.active>.faq-link {
|
||||
background-color: #d9480f;
|
||||
color: #f8f9fa;
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
.metisFolder {
|
||||
padding-left: 0;
|
||||
}
|
||||
.metisFolder, .metisFolder ul {
|
||||
list-style: none;
|
||||
}
|
||||
.metisFolder li {
|
||||
position: relative;
|
||||
}
|
||||
.metisFolder li a {
|
||||
display: block;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
outline: 0 none;
|
||||
}
|
||||
.metisFolder ul:before {
|
||||
position: absolute;
|
||||
border-left: 1px dotted #333;
|
||||
content: "";
|
||||
width: 30px;
|
||||
top: 25px;
|
||||
left: 5px;
|
||||
bottom: 17px;
|
||||
}
|
||||
.metisFolder ul > li:before {
|
||||
position: absolute;
|
||||
border-top: 1px dotted #333;
|
||||
content: "";
|
||||
width: 30px;
|
||||
top: 13px;
|
||||
left: -33px;
|
||||
}
|
||||
li.active > a > span.fa-folder-o:before {
|
||||
content: "\f115" !important;
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
.topbar-nav {
|
||||
background: #212529;
|
||||
}
|
||||
.topbar-nav ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
background: #212529;
|
||||
}
|
||||
.topbar-nav .metismenu {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
.topbar-nav .metismenu > li {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1 1 0%;
|
||||
flex: 1 1 0%;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.topbar-nav .metismenu a {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 15px;
|
||||
color: #adb5bd;
|
||||
outline-width: 0;
|
||||
transition: all .3s ease-out;
|
||||
}
|
||||
|
||||
|
||||
.topbar-nav .metismenu a:hover,
|
||||
.topbar-nav .metismenu a:focus,
|
||||
.topbar-nav .metismenu a:active {
|
||||
color: #f8f9fa;
|
||||
text-decoration: none;
|
||||
background: #0b7285;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.topbar-nav .metismenu {
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
}
|
||||
.topbar-nav .metismenu > li {
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
.topbar-nav .metismenu > li > ul {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
min-width: 100%;
|
||||
z-index: 1001;
|
||||
}
|
||||
.topbar-nav.is-hoverable .metismenu > li > ul {
|
||||
height: auto !important;
|
||||
}
|
||||
.topbar-nav.is-hoverable .metismenu > li:hover > ul {
|
||||
display: block;
|
||||
}
|
||||
.topbar-nav.is-hoverable .metismenu > li:hover > a.has-arrow:after {
|
||||
-webkit-transform: rotate(-135deg);
|
||||
transform: rotate(-135deg);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
.sidebar-nav {
|
||||
background: #212529;
|
||||
}
|
||||
.sidebar-nav ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
background: #212529;
|
||||
}
|
||||
|
||||
.sidebar-nav .metismenu {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sidebar-nav .metismenu > li {
|
||||
/*-webkit-box-flex: 1;
|
||||
-ms-flex: 1 1 0%;
|
||||
flex: 1 1 0%;*/
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
.sidebar-nav .metismenu a {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 15px;
|
||||
color: #adb5bd;
|
||||
outline-width: 0;
|
||||
transition: all .3s ease-out;
|
||||
}
|
||||
|
||||
.sidebar-nav .metismenu a:hover,
|
||||
.sidebar-nav .metismenu a:focus,
|
||||
.sidebar-nav .metismenu a:active {
|
||||
color: #f8f9fa;
|
||||
text-decoration: none;
|
||||
background: #0b7285;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.sidebar-nav .metismenu li {
|
||||
position: relative;
|
||||
}
|
||||
.sidebar-nav .metismenu > li > ul {
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
top: 0;
|
||||
min-width: 200px;
|
||||
z-index: 1001;
|
||||
}
|
||||
.sidebar-nav .metismenu > li:hover > ul {
|
||||
height: auto !important;
|
||||
}
|
||||
.sidebar-nav .metismenu > li:hover > ul,
|
||||
.sidebar-nav .metismenu > li:hover > ul.collapse {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sidebar-nav .metismenu > li:hover > a.has-arrow:after {
|
||||
transform: rotate(135deg);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
.sidebar-nav {
|
||||
background: #212529;
|
||||
}
|
||||
.sidebar-nav ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
background: #343a40;
|
||||
}
|
||||
|
||||
.sidebar-nav .metismenu {
|
||||
background: #212529;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sidebar-nav .metismenu li + li {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.sidebar-nav .metismenu li:first-child {
|
||||
margin-top: 5px;
|
||||
}
|
||||
.sidebar-nav .metismenu li:last-child {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
|
||||
.sidebar-nav .metismenu > li {
|
||||
/*-webkit-box-flex: 1;
|
||||
-ms-flex: 1 1 0%;
|
||||
flex: 1 1 0%;*/
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
.sidebar-nav .metismenu a {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 13px 15px;
|
||||
color: #adb5bd;
|
||||
outline-width: 0;
|
||||
transition: all .3s ease-out;
|
||||
}
|
||||
|
||||
.sidebar-nav .metismenu ul a {
|
||||
padding: 10px 15px 10px 30px;
|
||||
}
|
||||
|
||||
.sidebar-nav .metismenu ul ul a {
|
||||
padding: 10px 15px 10px 45px;
|
||||
}
|
||||
|
||||
.sidebar-nav .metismenu a:hover,
|
||||
.sidebar-nav .metismenu a:focus,
|
||||
.sidebar-nav .metismenu a:active,
|
||||
.sidebar-nav .metismenu .mm-active > a {
|
||||
color: #f8f9fa;
|
||||
text-decoration: none;
|
||||
background: #0b7285;
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
$(function() {
|
||||
$('table').addClass('table table-bordered table-striped');
|
||||
});
|
||||
@@ -0,0 +1,54 @@
|
||||
$(function() {
|
||||
|
||||
$('#menu').metisMenu();
|
||||
|
||||
$("#ajaxButton").one('click', function() {
|
||||
var $this = $(this);
|
||||
$.ajax({
|
||||
url: "demo-ajax.html",
|
||||
success: function(result) {
|
||||
|
||||
$('#menu').metisMenu('dispose');
|
||||
$("#menu").append(result);
|
||||
|
||||
new Noty({
|
||||
text: 'ajax menu appended to menu',
|
||||
layout: 'topRight',
|
||||
type: 'success',
|
||||
theme: 'relax',
|
||||
progressBar: true,
|
||||
timeout: 2000
|
||||
}).show();
|
||||
|
||||
$('#menu').metisMenu();
|
||||
$this.attr('disabled', 'disabled');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$('#menu2').metisMenu();
|
||||
|
||||
$("[data-url]").each(function(){
|
||||
$(this).one('click', function(event){
|
||||
event.preventDefault();
|
||||
var $this = $(this);
|
||||
var url = $this.attr('data-url');
|
||||
console.log(url);
|
||||
|
||||
$.ajax({
|
||||
url: url,
|
||||
success: function(result) {
|
||||
|
||||
$('#menu2').metisMenu('dispose');
|
||||
$this.parent('li').append(result);
|
||||
|
||||
$('#menu2').metisMenu();
|
||||
|
||||
$this.click();
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
@@ -0,0 +1,5 @@
|
||||
$(function () {
|
||||
|
||||
$('#menu').metisMenu();
|
||||
|
||||
});
|
||||
@@ -0,0 +1,11 @@
|
||||
$(function() {
|
||||
|
||||
$('.metismenu').metisMenu({
|
||||
toggle: false,
|
||||
triggerElement: '.card-header',
|
||||
parentTrigger: '.card',
|
||||
subMenu: '.card-body'
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
@@ -0,0 +1,47 @@
|
||||
$(function() {
|
||||
|
||||
$('#menu').metisMenu();
|
||||
|
||||
$('#stopMm').on('click', function(event) {
|
||||
$('#menu').metisMenu('dispose');
|
||||
new Noty({
|
||||
text: 'metisMenu stopped',
|
||||
layout: 'topRight',
|
||||
type: 'error',
|
||||
theme: 'relax',
|
||||
progressBar: true,
|
||||
timeout: 2000
|
||||
}).show();
|
||||
});
|
||||
|
||||
$('#startMm').on('click', function(event) {
|
||||
$('#menu').metisMenu();
|
||||
new Noty({
|
||||
text: 'metisMenu restarted',
|
||||
layout: 'topRight',
|
||||
type: 'success',
|
||||
theme: 'relax',
|
||||
progressBar: true,
|
||||
timeout: 2000
|
||||
}).show();
|
||||
});
|
||||
|
||||
$('#menu1').metisMenu();
|
||||
$('#deleteElem').one('click', function(event) {
|
||||
$(this).removeClass('btn-danger').addClass('btn-success').html('Menu 1 removed').attr('disabled', 'disabled');
|
||||
$('#menu1').metisMenu('dispose');
|
||||
|
||||
$('#menu1 #removable').remove();
|
||||
new Noty({
|
||||
text: 'Menu 1 removed',
|
||||
layout: 'topRight',
|
||||
type: 'information',
|
||||
theme: 'relax',
|
||||
progressBar: true,
|
||||
timeout: 2000
|
||||
}).show();
|
||||
|
||||
$('#menu1').metisMenu();
|
||||
});
|
||||
|
||||
});
|
||||
@@ -0,0 +1,38 @@
|
||||
$(function() {
|
||||
|
||||
$('#menu').metisMenu().on('show.metisMenu', function(event) {
|
||||
new Noty({
|
||||
text: $(event.target).parent('li').children('a').html() + ' opening ...',
|
||||
layout: 'topRight',
|
||||
type: 'information',
|
||||
theme: 'relax',
|
||||
|
||||
timeout: 350
|
||||
}).show();
|
||||
}).on('shown.metisMenu', function(event) {
|
||||
new Noty({
|
||||
text: $(event.target).parent('li').children('a').html() + ' opened',
|
||||
layout: 'topRight',
|
||||
type: 'success',
|
||||
theme: 'relax',
|
||||
timeout: 350
|
||||
}).show();
|
||||
}).on('hide.metisMenu', function(event) {
|
||||
new Noty({
|
||||
text: $(event.target).parent('li').children('a').html() + ' collapsing ...',
|
||||
layout: 'topRight',
|
||||
type: 'warning',
|
||||
theme: 'relax',
|
||||
timeout: 350
|
||||
}).show();
|
||||
}).on('hidden.metisMenu', function(event) {
|
||||
new Noty({
|
||||
text: $(event.target).parent('li').children('a').html() + ' collapsed',
|
||||
layout: 'topRight',
|
||||
type: 'error',
|
||||
theme: 'relax',
|
||||
timeout: 350
|
||||
}).show();
|
||||
});
|
||||
|
||||
});
|
||||
@@ -0,0 +1,7 @@
|
||||
$(function() {
|
||||
$('#menu')
|
||||
.metisMenu()
|
||||
.on('shown.metisMenu', function(event) {
|
||||
Jump("#menu")
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,10 @@
|
||||
$(function() {
|
||||
|
||||
$('.faq-menu').metisMenu({
|
||||
toggle: false,
|
||||
triggerElement: '.faq-link',
|
||||
parentTrigger: '.faq-item',
|
||||
subMenu: '.faq-answer'
|
||||
});
|
||||
|
||||
});
|
||||
@@ -0,0 +1,5 @@
|
||||
$(function () {
|
||||
$('.metisFolder').metisMenu({
|
||||
toggle: false
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,7 @@
|
||||
$(function() {
|
||||
|
||||
$('#menu1').metisMenu();
|
||||
|
||||
$('#menu2').metisMenu();
|
||||
|
||||
});
|
||||
@@ -0,0 +1,5 @@
|
||||
$(function() {
|
||||
|
||||
$('#menu1').metisMenu();
|
||||
|
||||
});
|
||||
@@ -0,0 +1,11 @@
|
||||
$(function() {
|
||||
|
||||
$('#menu1').metisMenu();
|
||||
|
||||
$('#menu2').metisMenu({
|
||||
toggle: false
|
||||
});
|
||||
|
||||
$('#menu3').metisMenu();
|
||||
|
||||
});
|
||||
@@ -0,0 +1,9 @@
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">AJAX Menu</a>
|
||||
<ul>
|
||||
<li><a href="#">ajax item 1</a></li>
|
||||
<li><a href="#">ajax item 2</a></li>
|
||||
<li><a href="http://api.jquery.com/jquery.ajax/" target="_blank">ajax document</a></li>
|
||||
<li><a href="#">ajax item 4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
@@ -0,0 +1,348 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<title>metisMenu - index</title>
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/metismenu/dist/metisMenu.min.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs/themes/prism.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noty/lib/noty.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noty/lib/themes/relax.css">
|
||||
|
||||
<link rel="stylesheet" href="assets/css/app.css">
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/jquery"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="https://unpkg.com/metismenu"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/prismjs"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/noty"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div class="navbar navbar-expand-md navbar-dark bg-dark box-shadow">
|
||||
<div class="container d-flex justify-content-between">
|
||||
<a href="index.html" class="navbar-brand d-flex align-items-center">
|
||||
<strong>metisMenu</strong>
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
|
||||
aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
|
||||
<ul class="navbar-nav ml-auto">
|
||||
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">Examples</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown01">
|
||||
<a class="dropdown-item" href="mm-vertical.html">Vertical Menu</a>
|
||||
<a class="dropdown-item" href="mm-horizontal.html">Horizontal Menu</a>
|
||||
<a class="dropdown-item" href="mm-folder.html">Folder View</a>
|
||||
<a class="dropdown-item" href="mm-vertical-hover.html">Hover Option For Desktop</a>
|
||||
<a class="dropdown-item" href="mm-animate.html">Animate</a>
|
||||
<a class="dropdown-item" href="mm-event.html">Event</a>
|
||||
<a class="dropdown-item" href="mm-event2.html">Event 2</a>
|
||||
<a class="dropdown-item" href="mm-dispose.html">Stop & Start metisMenu</a>
|
||||
<a class="dropdown-item" href="mm-ajax.html">Ajax</a>
|
||||
<a class="dropdown-item" href="mm-faq.html">FAQ</a>
|
||||
<a class="dropdown-item" href="mm-bs-card.html">Bootstrap Card</a>
|
||||
<a class="dropdown-item" href="mm-docs.html">Docs</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown02" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">Templates</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown02">
|
||||
<a class="dropdown-item" href="https://onokumus.com/chaldene" target="_blank">Chaldene Admin</a>
|
||||
<a class="dropdown-item" href="https://onokumus.com/elektron" target="_blank">Elektron Admin</a>
|
||||
<a class="dropdown-item" href="https://onokumus.com/twbuttons/" target="_blank">twbuttons</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://onokumus.com" target="_blank">onokumus</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="container">
|
||||
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
||||
|
||||
<section class="jumbotron text-center">
|
||||
<h1 class="jumbotron-heading">metisMenu</h1>
|
||||
<p class="lead text-muted">A jQuery menu plugin</p>
|
||||
<p>
|
||||
<a class="github-button" href="https://github.com/onokumus/metismenu" data-icon="octicon-star" data-size="large"
|
||||
data-show-count="true" aria-label="Star onokumus/metismenu on GitHub">Star</a>
|
||||
<a class="github-button" href="https://github.com/onokumus/metismenu/fork" data-icon="octicon-repo-forked"
|
||||
data-size="large" data-show-count="true" aria-label="Fork onokumus/metismenu on GitHub">Fork</a>
|
||||
<a class="github-button" href="https://github.com/onokumus/metismenu/archive/master.zip" data-icon="octicon-cloud-download"
|
||||
data-size="large" aria-label="Download onokumus/metismenu on GitHub">Download</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="https://www.npmjs.com/package/metismenu"><img src="https://img.shields.io/npm/v/metismenu.svg?style=flat"
|
||||
alt="NPM version"></a>
|
||||
<a href="https://npmjs.org/package/metismenu"><img src="https://img.shields.io/npm/dm/metismenu.svg?style=flat"
|
||||
alt="NPM monthly downloads"></a>
|
||||
<a href="https://npmjs.org/package/metismenu"><img src="https://img.shields.io/npm/dt/metismenu.svg?style=flat"
|
||||
alt="NPM total downloads"></a>
|
||||
<a href="https://travis-ci.org/onokumus/metismenu"><img src="https://img.shields.io/travis/onokumus/metismenu.svg?style=flat&label=Travis"
|
||||
alt="Linux Build Status"></a>
|
||||
<a href="https://www.jsdelivr.com/package/npm/metismenu"><img src="https://data.jsdelivr.com/v1/package/npm/metismenu/badge"
|
||||
alt=""></a>
|
||||
<a href="https://packagist.org/packages/onokumus/metismenu"><img src="https://img.shields.io/packagist/v/onokumus/metismenu.svg"
|
||||
alt="Packagist"></a>
|
||||
</p>
|
||||
</section>
|
||||
<ul>
|
||||
<li><a href="#getting-started">Getting started</a>
|
||||
<ul>
|
||||
<li><a href="#install">Install</a></li>
|
||||
<li><a href="#download">Download</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#usage">Usage</a>
|
||||
<ul>
|
||||
<li><a href="#stopping-list-opening-on-certain-elements">Stopping list opening on certain elements</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#options">Options</a>
|
||||
<ul>
|
||||
<li><a href="#toggle">toggle</a></li>
|
||||
<li><a href="#dispose">dispose</a></li>
|
||||
<li><a href="#preventdefault">preventDefault</a></li>
|
||||
<li><a href="#triggerelement">triggerElement</a></li>
|
||||
<li><a href="#parenttrigger">parentTrigger</a></li>
|
||||
<li><a href="#submenu">subMenu</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#events">Events</a></li>
|
||||
<li><a href="#migrating-to-v3-from-v2">Migrating to v3 from v2</a></li>
|
||||
<li><a href="#demo">Demo</a></li>
|
||||
<li><a href="#about">About</a>
|
||||
<ul>
|
||||
<li><a href="#related-projects">Related projects</a></li>
|
||||
<li><a href="#contributors">Contributors</a></li>
|
||||
<li><a href="#contributing">Contributing</a></li>
|
||||
<li><a href="#release-history">Release History</a></li>
|
||||
<li><a href="#author">Author</a></li>
|
||||
<li><a href="#license">License</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p><em>(TOC generated by <a href="https://github.com/verbose/verb">verb</a> using <a href="https://github.com/jonschlinkert/markdown-toc">markdown-toc</a>)</em></p>
|
||||
<h2 id="getting-started">Getting started</h2>
|
||||
<h3 id="install">Install</h3>
|
||||
<p>Install with <a href="https://www.npmjs.com/">npm</a>:</p>
|
||||
<pre><code class="lang-sh">$ npm <span class="hljs-keyword">install</span> <span class="hljs-comment">--save metismenu</span>
|
||||
</code></pre>
|
||||
<p>Install with <a href="https://yarnpkg.com">yarn</a>:</p>
|
||||
<pre><code class="lang-sh">$ yarn <span class="hljs-keyword">add</span><span class="bash"> metismenu</span>
|
||||
</code></pre>
|
||||
<p>Install with <a href="https://getcomposer.org/">composer</a></p>
|
||||
<pre><code class="lang-sh">$ composer <span class="hljs-keyword">require</span> onokumus/<span class="hljs-symbol">metismenu:</span>dev-master
|
||||
</code></pre>
|
||||
<h3 id="download">Download</h3>
|
||||
<p><a href="https://github.com/onokumus/metisMenu/archive/master.zip">download</a></p>
|
||||
<h2 id="usage">Usage</h2>
|
||||
<ol>
|
||||
<li>
|
||||
<p>Include metismenu StyleSheet</p>
|
||||
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://unpkg.com/metismenu/dist/metisMenu.min.css"</span>></span>
|
||||
<span class="hljs-comment"><!-- OR --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/metismenu/dist/metisMenu.min.css"</span>></span>
|
||||
</code></pre>
|
||||
</li>
|
||||
<li>
|
||||
<p>Include jQuery</p>
|
||||
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://unpkg.com/jquery"</span>></span><span class="undefined"></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
|
||||
<span class="hljs-comment"><!-- OR --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/jquery"</span>></span><span class="undefined"></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
|
||||
</code></pre>
|
||||
</li>
|
||||
<li>
|
||||
<p>Include metisMenu plugin's code</p>
|
||||
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://unpkg.com/metismenu"</span>></span><span class="undefined"></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
|
||||
<span class="hljs-comment"><!-- OR --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/metismenu"</span>></span><span class="undefined"></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
|
||||
</code></pre>
|
||||
</li>
|
||||
<li>
|
||||
<p>Add id attribute to unordered list</p>
|
||||
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"metismenu"</span>></span>
|
||||
|
||||
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
|
||||
</code></pre>
|
||||
</li>
|
||||
<li>
|
||||
<p>Make expand/collapse controls accessible</p>
|
||||
<blockquote>
|
||||
<p>Be sure to add <code>aria-expanded</code> to the element <code>a</code>. This attribute explicitly defines
|
||||
the current state of the collapsible element to screen readers and similar assistive technologies. If the
|
||||
collapsible element is closed by default, it should have a value of <code>aria-expanded="false"</code>.
|
||||
If you've set the collapsible element's parent <code>li</code> element to be open by default using
|
||||
the <code>mm-active</code> class, set <code>aria-expanded="true"</code> on the control instead.
|
||||
The plugin will automatically toggle this attribute based on whether or not the collapsible element has
|
||||
been opened or closed.</p>
|
||||
</blockquote>
|
||||
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"metismenu"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mm-active"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">aria-expanded</span>=<span class="hljs-string">"true"</span>></span>Menu 1<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">ul</span>></span>
|
||||
...
|
||||
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">aria-expanded</span>=<span class="hljs-string">"false"</span>></span>Menu 2<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">ul</span>></span>
|
||||
...
|
||||
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
...
|
||||
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
|
||||
</code></pre>
|
||||
</li>
|
||||
<li>
|
||||
<p>Arrow Options</p>
|
||||
<blockquote>
|
||||
<p>add <code>has-arrow</code> class to <code>a</code> element</p>
|
||||
</blockquote>
|
||||
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"metismenu"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mm-active"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"has-arrow"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">aria-expanded</span>=<span class="hljs-string">"true"</span>></span>Menu 1<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">ul</span>></span>
|
||||
...
|
||||
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"has-arrow"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">aria-expanded</span>=<span class="hljs-string">"false"</span>></span>Menu 2<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">ul</span>></span>
|
||||
...
|
||||
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
...
|
||||
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
|
||||
</code></pre>
|
||||
</li>
|
||||
<li>
|
||||
<p>Call the plugin:</p>
|
||||
<pre><code class="lang-javascript"> <span class="hljs-variable">$(</span><span class="hljs-string">"#metismenu"</span>).metisMenu();
|
||||
</code></pre>
|
||||
</li>
|
||||
</ol>
|
||||
<h3 id="stopping-list-opening-on-certain-elements">Stopping list opening on certain elements</h3>
|
||||
<p>Setting aria-disabled="true" in the <code><a></code> element as shown will stop metisMenu
|
||||
opening the menu for that particular list. This can be changed dynamically and will be obeyed correctly:</p>
|
||||
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">aria-expanded</span>=<span class="hljs-string">"false"</span> <span class="hljs-attr">aria-disabled</span>=<span class="hljs-string">"true"</span>></span>List 1<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
|
||||
</code></pre>
|
||||
<h2 id="options">Options</h2>
|
||||
<h4 id="toggle">toggle</h4>
|
||||
<p>Type: <code>Boolean</code>
|
||||
Default: <code>true</code></p>
|
||||
<p>For auto collapse support.</p>
|
||||
<pre><code class="lang-javascript"> <span class="hljs-variable">$(</span><span class="hljs-string">"#metismenu"</span>).metisMenu({
|
||||
<span class="hljs-symbol">toggle:</span> <span class="hljs-keyword">false</span>
|
||||
});
|
||||
</code></pre>
|
||||
<h4 id="dispose">dispose</h4>
|
||||
<p>Type: <code>String</code>
|
||||
Default: <code>null</code></p>
|
||||
<p>For stop and destroy metisMenu.</p>
|
||||
<pre><code class="lang-javascript"> <span class="hljs-variable">$(</span><span class="hljs-string">"#metismenu"</span>).metisMenu(<span class="hljs-string">'dispose'</span>);
|
||||
</code></pre>
|
||||
<h4 id="preventdefault">preventDefault</h4>
|
||||
<p>Type: <code>Boolean</code>
|
||||
Default: <code>true</code></p>
|
||||
<blockquote>
|
||||
<p>Prevents or allows dropdowns' onclick events after expanding/collapsing.</p>
|
||||
</blockquote>
|
||||
<pre><code class="lang-javascript"> <span class="hljs-variable">$(</span><span class="hljs-string">"#menu"</span>).metisMenu({
|
||||
<span class="hljs-symbol">preventDefault:</span> <span class="hljs-keyword">false</span>
|
||||
});
|
||||
</code></pre>
|
||||
<p><em>since from version 2.7.0</em></p>
|
||||
<h4 id="triggerelement">triggerElement</h4>
|
||||
<p>Type: <code>jQuery selector</code>
|
||||
Default: <code>a</code></p>
|
||||
<pre><code class="lang-javascript"> <span class="hljs-symbol">$</span>(<span class="hljs-string">"#metismenu"</span>).metisMenu({
|
||||
triggerElement: <span class="hljs-string">'.nav-link'</span> <span class="hljs-comment">// bootstrap 4</span>
|
||||
});
|
||||
</code></pre>
|
||||
<h4 id="parenttrigger">parentTrigger</h4>
|
||||
<p>Type: <code>jQuery selector</code>
|
||||
Default: <code>li</code></p>
|
||||
<pre><code class="lang-javascript"> <span class="hljs-symbol">$</span>(<span class="hljs-string">"#metismenu"</span>).metisMenu({
|
||||
parentTrigger: <span class="hljs-string">'.nav-item'</span> <span class="hljs-comment">// bootstrap 4</span>
|
||||
});
|
||||
</code></pre>
|
||||
<h4 id="submenu">subMenu</h4>
|
||||
<p>Type: <code>jQuery selector</code>
|
||||
Default: <code>ul</code></p>
|
||||
<pre><code class="lang-javascript"> <span class="hljs-symbol">$</span>(<span class="hljs-string">"#metismenu"</span>).metisMenu({
|
||||
subMenu: <span class="hljs-string">'.nav.flex-column'</span> <span class="hljs-comment">// bootstrap 4</span>
|
||||
});
|
||||
</code></pre>
|
||||
<h2 id="events">Events</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th><strong>Event Type</strong></th>
|
||||
<th><strong>Description</strong></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>show.metisMenu</td>
|
||||
<td>This event fires immediately when the <code>_show</code> instance method is called.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>shown.metisMenu</td>
|
||||
<td>This event is fired when a collapse <code>ul</code> element has been made visible to the user (will wait
|
||||
for CSS transitions to complete).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>hide.metisMenu</td>
|
||||
<td>This event is fired immediately when the <code>_hide</code> method has been called.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>hidden.metisMenu</td>
|
||||
<td>This event is fired when a collapse <code>ul</code> element has been hidden from the user (will wait for
|
||||
CSS transitions to complete).</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h2 id="migrating-to-v3-from-v2">Migrating to v3 from v2</h2>
|
||||
<ul>
|
||||
<li>Update <code>metisMenu.js</code> & <code>metisMenu.css</code> files</li>
|
||||
<li>Change <code>active</code> class to <code>mm-active</code></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h3>Author</h3>
|
||||
<p><strong>Osman Nuri Okumus</strong></p>
|
||||
<ul>
|
||||
<li><a href="https://github.com/onokumus">github/onokumus</a></li>
|
||||
<li><a href="https://twitter.com/onokumus">twitter/onokumus</a></li>
|
||||
</ul>
|
||||
<h3>License</h3>
|
||||
<p>Copyright © 2018, <a href="https://github.com/onokumus">Osman Nuri Okumus</a>.<br>
|
||||
Released under the <a href="LICENSE">MIT License</a>.</p>
|
||||
|
||||
<script>
|
||||
$(function () {
|
||||
$('table').addClass('table table-bordered table-striped');
|
||||
});
|
||||
</script>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,253 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<title>metisMenu - Ajax</title>
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/metismenu/dist/metisMenu.min.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs/themes/prism.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noty/lib/noty.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noty/lib/themes/relax.css">
|
||||
|
||||
<link rel="stylesheet" href="assets/css/app.css">
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/jquery"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="https://unpkg.com/metismenu"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/prismjs"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/noty"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div class="navbar navbar-expand-md navbar-dark bg-dark box-shadow">
|
||||
<div class="container d-flex justify-content-between">
|
||||
<a href="index.html" class="navbar-brand d-flex align-items-center">
|
||||
<strong>metisMenu</strong>
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
|
||||
aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
|
||||
<ul class="navbar-nav ml-auto">
|
||||
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">Examples</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown01">
|
||||
<a class="dropdown-item" href="mm-vertical.html">Vertical Menu</a>
|
||||
<a class="dropdown-item" href="mm-horizontal.html">Horizontal Menu</a>
|
||||
<a class="dropdown-item" href="mm-folder.html">Folder View</a>
|
||||
<a class="dropdown-item" href="mm-vertical-hover.html">Hover Option For Desktop</a>
|
||||
<a class="dropdown-item" href="mm-animate.html">Animate</a>
|
||||
<a class="dropdown-item" href="mm-event.html">Event</a>
|
||||
<a class="dropdown-item" href="mm-event2.html">Event 2</a>
|
||||
<a class="dropdown-item" href="mm-dispose.html">Stop & Start metisMenu</a>
|
||||
<a class="dropdown-item" href="mm-ajax.html">Ajax</a>
|
||||
<a class="dropdown-item" href="mm-faq.html">FAQ</a>
|
||||
<a class="dropdown-item" href="mm-bs-card.html">Bootstrap Card</a><a class="dropdown-item" href="mm-docs.html">Docs</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown02" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">Templates</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown02">
|
||||
<a class="dropdown-item" href="https://onokumus.com/chaldene" target="_blank">Chaldene Admin</a>
|
||||
<a class="dropdown-item" href="https://onokumus.com/elektron" target="_blank">Elektron Admin</a>
|
||||
<a class="dropdown-item" href="https://onokumus.com/twbuttons/" target="_blank">twbuttons</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://onokumus.com" target="_blank">onokumus</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="container">
|
||||
<link href="assets/css/mm-vertical.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<section class="jumbotron text-center">
|
||||
<h2 class="jumbotron-heading">Ajax</h2>
|
||||
<a class="btn btn-outline-info" href="assets/css/mm-vertical.css" target="_top">
|
||||
<i class="fa fa-fw fa-css3"></i>
|
||||
Download CSS
|
||||
</a>
|
||||
<a class="btn btn-outline-warning" href="assets/js/mm-ajax.js" target="_top">
|
||||
<i class="fa fa-fw fa-file-code-o"></i>
|
||||
Download JS</a>
|
||||
</section>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<nav class="sidebar-nav">
|
||||
<ul class="metismenu" id="menu">
|
||||
<li>
|
||||
<a class="has-arrow" href="#">
|
||||
<span class="fa fa-fw fa-github fa-lg"></span>
|
||||
metisMenu
|
||||
</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://github.com/onokumus/metisMenu">
|
||||
<span class="fa fa-fw fa-code-fork"></span> Fork
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/onokumus/metisMenu">
|
||||
<span class="fa fa-fw fa-star"></span> Star
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/onokumus/metisMenu/issues">
|
||||
<span class="fa fa-fw fa-exclamation-triangle"></span> Issues
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 0</a>
|
||||
<ul>
|
||||
<li><a href="#">item 0.1</a></li>
|
||||
<li><a href="#">item 0.2</a></li>
|
||||
<li><a href="https://onokumus.com">onokumus</a></li>
|
||||
<li><a href="#">item 0.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li id="removable">
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 1</a>
|
||||
<ul>
|
||||
<li><a href="#">item 1.1</a></li>
|
||||
<li><a href="#">item 1.2</a></li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 1.3</a>
|
||||
<ul>
|
||||
<li><a href="#">item 1.3.1</a></li>
|
||||
<li><a href="#">item 1.3.2</a></li>
|
||||
<li><a href="#">item 1.3.3</a></li>
|
||||
<li><a href="#">item 1.3.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">item 1.4</a></li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 1.5</a>
|
||||
<ul>
|
||||
<li><a href="#">item 1.5.1</a></li>
|
||||
<li><a href="#">item 1.5.2</a></li>
|
||||
<li><a href="#">item 1.5.3</a></li>
|
||||
<li><a href="#">item 1.5.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 2</a>
|
||||
<ul>
|
||||
<li><a href="#">item 2.1</a></li>
|
||||
<li><a href="#">item 2.2</a></li>
|
||||
<li><a href="#">item 2.3</a></li>
|
||||
<li><a href="#">item 2.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="col-md-9">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Simple Ajax</h5>
|
||||
<button type="button" class="btn btn-outline-success" id="ajaxButton">
|
||||
get ajax menu
|
||||
</button>
|
||||
<pre><code class="language-javascript">$(<span class="hljs-string">'#menu'</span>).metisMenu();
|
||||
|
||||
$(<span class="hljs-string">"#ajaxButton"</span>).one(<span class="hljs-string">'click'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
|
||||
<span class="hljs-keyword">var</span> $<span class="hljs-keyword">this</span> = $(<span class="hljs-keyword">this</span>);
|
||||
$.ajax({
|
||||
<span class="hljs-attr">url</span>: <span class="hljs-string">"demo-ajax.html"</span>,
|
||||
<span class="hljs-attr">success</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">result</span>) </span>{
|
||||
|
||||
$(<span class="hljs-string">'#menu'</span>).metisMenu(<span class="hljs-string">'dispose'</span>);
|
||||
$(<span class="hljs-string">"#menu"</span>).append(result);
|
||||
|
||||
$(<span class="hljs-string">'#menu'</span>).metisMenu();
|
||||
$<span class="hljs-keyword">this</span>.attr(<span class="hljs-string">'disabled'</span>, <span class="hljs-string">'disabled'</span>);
|
||||
}
|
||||
});
|
||||
});
|
||||
</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<nav class="sidebar-nav">
|
||||
|
||||
<ul class="metismenu" id="menu2">
|
||||
<li><a href="" class="has-arrow" data-url="ajax-1.html">Ajax Menu 1</a></li>
|
||||
<li><a href="" class="has-arrow" data-url="ajax-2.html">Ajax Menu 2</a></li>
|
||||
<li><a href="" class="has-arrow" data-url="ajax-3.html">Ajax Menu 3</a></li>
|
||||
<li><a href="" class="has-arrow" data-url="ajax-4.html">Ajax Menu 4</a></li>
|
||||
</ul>
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="col-md-9">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Simple Ajax <small>one level</small></h5>
|
||||
<pre><code class="language-javascript"> $(<span class="hljs-string">'#menu2'</span>).metisMenu();
|
||||
|
||||
$(<span class="hljs-string">"[data-url]"</span>).each(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
|
||||
$(<span class="hljs-keyword">this</span>).one(<span class="hljs-string">'click'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">event</span>)</span>{
|
||||
event.preventDefault();
|
||||
<span class="hljs-keyword">var</span> $<span class="hljs-keyword">this</span> = $(<span class="hljs-keyword">this</span>);
|
||||
<span class="hljs-keyword">var</span> url = $<span class="hljs-keyword">this</span>.attr(<span class="hljs-string">'data-url'</span>);
|
||||
<span class="hljs-built_in">console</span>.log(url);
|
||||
|
||||
$.ajax({
|
||||
<span class="hljs-attr">url</span>: url,
|
||||
<span class="hljs-attr">success</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">result</span>) </span>{
|
||||
|
||||
$(<span class="hljs-string">'#menu2'</span>).metisMenu(<span class="hljs-string">'dispose'</span>);
|
||||
$<span class="hljs-keyword">this</span>.parent(<span class="hljs-string">'li'</span>).append(result);
|
||||
|
||||
$(<span class="hljs-string">'#menu2'</span>).metisMenu();
|
||||
|
||||
$<span class="hljs-keyword">this</span>.click();
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<script src="assets/js/mm-ajax.js"></script>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,335 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<title>metisMenu - animate</title>
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/metismenu/dist/metisMenu.min.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs/themes/prism.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noty/lib/noty.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noty/lib/themes/relax.css">
|
||||
|
||||
<link rel="stylesheet" href="assets/css/app.css">
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/jquery"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="https://unpkg.com/metismenu"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/prismjs"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/noty"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div class="navbar navbar-expand-md navbar-dark bg-dark box-shadow">
|
||||
<div class="container d-flex justify-content-between">
|
||||
<a href="index.html" class="navbar-brand d-flex align-items-center">
|
||||
<strong>metisMenu</strong>
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
|
||||
aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
|
||||
<ul class="navbar-nav ml-auto">
|
||||
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">Examples</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown01">
|
||||
<a class="dropdown-item" href="mm-vertical.html">Vertical Menu</a>
|
||||
<a class="dropdown-item" href="mm-horizontal.html">Horizontal Menu</a>
|
||||
<a class="dropdown-item" href="mm-folder.html">Folder View</a>
|
||||
<a class="dropdown-item" href="mm-vertical-hover.html">Hover Option For Desktop</a>
|
||||
<a class="dropdown-item" href="mm-animate.html">Animate</a>
|
||||
<a class="dropdown-item" href="mm-event.html">Event</a>
|
||||
<a class="dropdown-item" href="mm-event2.html">Event 2</a>
|
||||
<a class="dropdown-item" href="mm-dispose.html">Stop & Start metisMenu</a>
|
||||
<a class="dropdown-item" href="mm-ajax.html">Ajax</a>
|
||||
<a class="dropdown-item" href="mm-faq.html">FAQ</a>
|
||||
<a class="dropdown-item" href="mm-bs-card.html">Bootstrap Card</a><a class="dropdown-item" href="mm-docs.html">Docs</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown02" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">Templates</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown02">
|
||||
<a class="dropdown-item" href="https://onokumus.com/chaldene" target="_blank">Chaldene Admin</a>
|
||||
<a class="dropdown-item" href="https://onokumus.com/elektron" target="_blank">Elektron Admin</a>
|
||||
<a class="dropdown-item" href="https://onokumus.com/twbuttons/" target="_blank">twbuttons</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://onokumus.com" target="_blank">onokumus</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="container">
|
||||
<link rel="stylesheet" href="assets/css/mm-vertical.css">
|
||||
<style>
|
||||
.metismenu .fade.mm-collapse.mm-show {
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
<section class="jumbotron text-center">
|
||||
<h2 class="jumbotron-heading">Animate</h2>
|
||||
<a class="btn btn-outline-info" href="assets/css/mm-vertical.css" target="_top">
|
||||
<i class="fa fa-fw fa-css3"></i>
|
||||
Download CSS
|
||||
</a>
|
||||
<a class="btn btn-outline-warning" href="assets/js/mm-animate.js" target="_top">
|
||||
<i class="fa fa-fw fa-file-code-o"></i>
|
||||
Download JS</a>
|
||||
</section>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<nav class="sidebar-nav">
|
||||
<ul class="metismenu" id="menu">
|
||||
<li class="active">
|
||||
<a href="#" aria-expanded="true">
|
||||
<span class="fa fa-fw fa-github fa-lg"></span>
|
||||
<span class="sidebar-nav-item">metisMenu</span>
|
||||
<span class="fa arrow"></span>
|
||||
</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://github.com/onokumus/metisMenu">
|
||||
<span class="fa fa-fw fa-code-fork"></span>
|
||||
Fork
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/onokumus/metisMenu">
|
||||
<span class="fa fa-fw fa-star"></span>
|
||||
Star
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/onokumus/metisMenu/issues">
|
||||
<span class="fa fa-fw fa-exclamation-triangle"></span>
|
||||
Issues
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" aria-expanded="false">Bounce<span class="fa arrow"></span></a>
|
||||
<ul aria-expanded="false" class="animated bounce">
|
||||
<li>
|
||||
<a href="#">bounceIn</a>
|
||||
<ul class="animated bounceIn">
|
||||
<li><a href="#">item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">bounceInDown</a>
|
||||
<ul class="animated bounceInDown">
|
||||
<li><a href="#">item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">bounceInLeft</a>
|
||||
<ul class="animated bounceInLeft">
|
||||
<li><a href="#">item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">bounceInRight</a>
|
||||
<ul class="animated bounceInRight">
|
||||
<li><a href="#">item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">bounceInUp</a>
|
||||
<ul class="animated bounceInUp">
|
||||
<li><a href="#">item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" aria-expanded="false">Fade<span class="fa arrow"></span></a>
|
||||
<ul aria-expanded="false" class="animated fade">
|
||||
<li>
|
||||
<a href="#">fadeIn</a>
|
||||
<ul class="animated fadeIn">
|
||||
<li><a href="#">item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">fadeInDown</a>
|
||||
<ul class="animated fadeInDown">
|
||||
<li><a href="#">item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">fadeInDownBig</a>
|
||||
<ul class="animated fadeInDownBig">
|
||||
<li><a href="#">item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">fadeInLeft</a>
|
||||
<ul class="animated fadeInLeft">
|
||||
<li><a href="#">item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">fadeInLeftBig</a>
|
||||
<ul class="animated fadeInLeftBig">
|
||||
<li><a href="#">item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">fadeInRight</a>
|
||||
<ul class="animated fadeInRight">
|
||||
<li><a href="#">item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">fadeInRightBig</a>
|
||||
<ul class="animated fadeInRightBig">
|
||||
<li><a href="#">item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">fadeInUp</a>
|
||||
<ul class="animated fadeInUp">
|
||||
<li><a href="#">item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">fadeInUpBig</a>
|
||||
<ul class="animated fadeInUpBig">
|
||||
<li><a href="#">item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" aria-expanded="false">Flip<span class="fa arrow"></span></a>
|
||||
<ul aria-expanded="false" class="animated flip">
|
||||
<li>
|
||||
<a href="#">flipInX</a>
|
||||
<ul class="animated flipInX">
|
||||
<li><a href="#">item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">flipInY</a>
|
||||
<ul class="animated flipInY">
|
||||
<li><a href="#">item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" aria-expanded="false">Zoom<span class="fa arrow"></span></a>
|
||||
<ul aria-expanded="false" class="animated swing">
|
||||
<li>
|
||||
<a href="#">zoomIn</a>
|
||||
<ul class="animated zoomIn">
|
||||
<li><a href="#">item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">zoomInDown</a>
|
||||
<ul class="animated zoomInDown">
|
||||
<li><a href="#">item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">zoomInLeft</a>
|
||||
<ul class="animated zoomInLeft">
|
||||
<li><a href="#">item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">zoomInRight</a>
|
||||
<ul class="animated zoomInRight">
|
||||
<li><a href="#">item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">zoomInUp</a>
|
||||
<ul class="animated zoomInUp">
|
||||
<li><a href="#">item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="#" aria-expanded="false">Slide<span class="fa arrow"></span></a>
|
||||
<ul aria-expanded="false" class="animated shake">
|
||||
<li>
|
||||
<a href="#">slideInDown</a>
|
||||
<ul class="animated slideInDown">
|
||||
<li><a href="#">item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">slideInLeft</a>
|
||||
<ul class="animated slideInLeft">
|
||||
<li><a href="#">item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">slideInRight</a>
|
||||
<ul class="animated slideInRight">
|
||||
<li><a href="#">item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">slideInUp</a>
|
||||
<ul class="animated zoomInRight">
|
||||
<li><a href="#">item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">slideInUp</a>
|
||||
<ul class="animated zoomInUp">
|
||||
<li><a href="#">item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="col-md-9">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Animate</h5>
|
||||
<h6>Include <code>animate.css</code></h6>
|
||||
<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/animate.css"</span>></span>
|
||||
</code></pre>
|
||||
<h6>Add <code>animated bounce</code> classes to <code>ul</code> element</h6>
|
||||
<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"animated bounce"</span>></span> ... <span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
|
||||
</code></pre>
|
||||
|
||||
<div class="alert alert-warning" role="alert">
|
||||
<p>if you want to use <code>animate fade</code> classes with <code>bootstrap 4</code>, add following code to your stylesheet file.</p>
|
||||
<pre><code class="language-css"><span class="hljs-selector-class">.metismenu</span> <span class="hljs-selector-class">.fade</span><span class="hljs-selector-class">.mm-collapse</span><span class="hljs-selector-class">.mm-show</span> {
|
||||
<span class="hljs-attribute">opacity</span>: <span class="hljs-number">1</span>;
|
||||
}
|
||||
</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="assets/js/mm-animate.js" charset="utf-8"></script>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,119 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<title>metisMenu - Bootstrap Card</title>
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/metismenu/dist/metisMenu.min.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs/themes/prism.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noty/lib/noty.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noty/lib/themes/relax.css">
|
||||
|
||||
<link rel="stylesheet" href="assets/css/app.css">
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/jquery"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="https://unpkg.com/metismenu"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/prismjs"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/noty"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div class="navbar navbar-expand-md navbar-dark bg-dark box-shadow">
|
||||
<div class="container d-flex justify-content-between">
|
||||
<a href="index.html" class="navbar-brand d-flex align-items-center">
|
||||
<strong>metisMenu</strong>
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
|
||||
aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
|
||||
<ul class="navbar-nav ml-auto">
|
||||
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">Examples</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown01">
|
||||
<a class="dropdown-item" href="mm-vertical.html">Vertical Menu</a>
|
||||
<a class="dropdown-item" href="mm-horizontal.html">Horizontal Menu</a>
|
||||
<a class="dropdown-item" href="mm-folder.html">Folder View</a>
|
||||
<a class="dropdown-item" href="mm-vertical-hover.html">Hover Option For Desktop</a>
|
||||
<a class="dropdown-item" href="mm-animate.html">Animate</a>
|
||||
<a class="dropdown-item" href="mm-event.html">Event</a>
|
||||
<a class="dropdown-item" href="mm-event2.html">Event 2</a>
|
||||
<a class="dropdown-item" href="mm-dispose.html">Stop & Start metisMenu</a>
|
||||
<a class="dropdown-item" href="mm-ajax.html">Ajax</a>
|
||||
<a class="dropdown-item" href="mm-faq.html">FAQ</a>
|
||||
<a class="dropdown-item" href="mm-bs-card.html">Bootstrap Card</a><a class="dropdown-item" href="mm-docs.html">Docs</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown02" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">Templates</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown02">
|
||||
<a class="dropdown-item" href="https://onokumus.com/chaldene" target="_blank">Chaldene Admin</a>
|
||||
<a class="dropdown-item" href="https://onokumus.com/elektron" target="_blank">Elektron Admin</a>
|
||||
<a class="dropdown-item" href="https://onokumus.com/twbuttons/" target="_blank">twbuttons</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://onokumus.com" target="_blank">onokumus</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="container">
|
||||
<style>
|
||||
.metismenu .has-arrow {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
<section class="jumbotron text-center">
|
||||
<h2 class="jumbotron-heading">Bootstrap Card</h2>
|
||||
<a class="btn btn-outline-warning" href="assets/js/mm-bs-card.js" target="_top">
|
||||
<i class="fa fa-fw fa-file-code-o"></i>
|
||||
Download JS</a>
|
||||
</section>
|
||||
|
||||
<div class="row metismenu">
|
||||
<div class="col-md-6">
|
||||
<div class="card mb-2">
|
||||
<div class="card-header has-arrow">
|
||||
Featured
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Special title treatment</h5>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card mb-2 mm-active">
|
||||
<div class="card-header has-arrow">
|
||||
Featured
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Special title treatment</h5>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="assets/js/mm-bs-card.js"></script>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,308 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<title>metisMenu - dispose menu</title>
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/metismenu/dist/metisMenu.min.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs/themes/prism.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noty/lib/noty.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noty/lib/themes/relax.css">
|
||||
|
||||
<link rel="stylesheet" href="assets/css/app.css">
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/jquery"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="https://unpkg.com/metismenu"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/prismjs"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/noty"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div class="navbar navbar-expand-md navbar-dark bg-dark box-shadow">
|
||||
<div class="container d-flex justify-content-between">
|
||||
<a href="index.html" class="navbar-brand d-flex align-items-center">
|
||||
<strong>metisMenu</strong>
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
|
||||
aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
|
||||
<ul class="navbar-nav ml-auto">
|
||||
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">Examples</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown01">
|
||||
<a class="dropdown-item" href="mm-vertical.html">Vertical Menu</a>
|
||||
<a class="dropdown-item" href="mm-horizontal.html">Horizontal Menu</a>
|
||||
<a class="dropdown-item" href="mm-folder.html">Folder View</a>
|
||||
<a class="dropdown-item" href="mm-vertical-hover.html">Hover Option For Desktop</a>
|
||||
<a class="dropdown-item" href="mm-animate.html">Animate</a>
|
||||
<a class="dropdown-item" href="mm-event.html">Event</a>
|
||||
<a class="dropdown-item" href="mm-event2.html">Event 2</a>
|
||||
<a class="dropdown-item" href="mm-dispose.html">Stop & Start metisMenu</a>
|
||||
<a class="dropdown-item" href="mm-ajax.html">Ajax</a>
|
||||
<a class="dropdown-item" href="mm-faq.html">FAQ</a>
|
||||
<a class="dropdown-item" href="mm-bs-card.html">Bootstrap Card</a><a class="dropdown-item" href="mm-docs.html">Docs</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown02" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">Templates</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown02">
|
||||
<a class="dropdown-item" href="https://onokumus.com/chaldene" target="_blank">Chaldene Admin</a>
|
||||
<a class="dropdown-item" href="https://onokumus.com/elektron" target="_blank">Elektron Admin</a>
|
||||
<a class="dropdown-item" href="https://onokumus.com/twbuttons/" target="_blank">twbuttons</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://onokumus.com" target="_blank">onokumus</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="container">
|
||||
<link href="assets/css/mm-vertical.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<section class="jumbotron text-center">
|
||||
<h2 class="jumbotron-heading">Stop/Re-start</h2>
|
||||
<a class="btn btn-outline-info" href="assets/css/mm-vertical.css" target="_top">
|
||||
<i class="fa fa-fw fa-css3"></i>
|
||||
Download CSS
|
||||
</a>
|
||||
<a class="btn btn-outline-warning" href="assets/js/mm-dispose.js" target="_top">
|
||||
<i class="fa fa-fw fa-file-code-o"></i>
|
||||
Download JS</a>
|
||||
</section>
|
||||
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<nav class="sidebar-nav">
|
||||
<ul class="metismenu" id="menu">
|
||||
<li>
|
||||
<a class="has-arrow" href="#">
|
||||
<span class="fa fa-fw fa-github fa-lg"></span>
|
||||
metisMenu
|
||||
</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://github.com/onokumus/metisMenu">
|
||||
<span class="fa fa-fw fa-code-fork"></span> Fork
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/onokumus/metisMenu">
|
||||
<span class="fa fa-fw fa-star"></span> Star
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/onokumus/metisMenu/issues">
|
||||
<span class="fa fa-fw fa-exclamation-triangle"></span> Issues
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 0</a>
|
||||
<ul>
|
||||
<li><a href="#">item 0.1</a></li>
|
||||
<li><a href="#">item 0.2</a></li>
|
||||
<li><a href="https://onokumus.com">onokumus</a></li>
|
||||
<li><a href="#">item 0.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li id="removable">
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 1</a>
|
||||
<ul>
|
||||
<li><a href="#">item 1.1</a></li>
|
||||
<li><a href="#">item 1.2</a></li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 1.3</a>
|
||||
<ul>
|
||||
<li><a href="#">item 1.3.1</a></li>
|
||||
<li><a href="#">item 1.3.2</a></li>
|
||||
<li><a href="#">item 1.3.3</a></li>
|
||||
<li><a href="#">item 1.3.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">item 1.4</a></li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 1.5</a>
|
||||
<ul>
|
||||
<li><a href="#">item 1.5.1</a></li>
|
||||
<li><a href="#">item 1.5.2</a></li>
|
||||
<li><a href="#">item 1.5.3</a></li>
|
||||
<li><a href="#">item 1.5.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 2</a>
|
||||
<ul>
|
||||
<li><a href="#">item 2.1</a></li>
|
||||
<li><a href="#">item 2.2</a></li>
|
||||
<li><a href="#">item 2.3</a></li>
|
||||
<li><a href="#">item 2.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-md-9">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Stop/Re-start</h5>
|
||||
<button type="button" class="btn btn-danger btn-lg" id="stopMm">
|
||||
stop metisMenu
|
||||
</button>
|
||||
<button type="button" class="btn btn-success btn-lg" id="startMm">
|
||||
start metisMenu
|
||||
</button>
|
||||
|
||||
<pre><code class="language-javascript">$(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
|
||||
|
||||
$(<span class="hljs-string">'#menu'</span>).metisMenu();
|
||||
|
||||
$(<span class="hljs-string">'#stopMm'</span>).on(<span class="hljs-string">'click'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">event</span>) </span>{
|
||||
$(<span class="hljs-string">'#menu'</span>).metisMenu(<span class="hljs-string">'dispose'</span>);
|
||||
});
|
||||
|
||||
$(<span class="hljs-string">'#startMm'</span>).on(<span class="hljs-string">'click'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">event</span>) </span>{
|
||||
$(<span class="hljs-string">'#menu'</span>).metisMenu();
|
||||
});
|
||||
|
||||
});
|
||||
</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<nav class="sidebar-nav">
|
||||
<ul class="metismenu" id="menu1">
|
||||
<li>
|
||||
<a class="has-arrow" href="#">
|
||||
<span class="fa fa-fw fa-github fa-lg"></span>
|
||||
metisMenu
|
||||
</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://github.com/onokumus/metisMenu">
|
||||
<span class="fa fa-fw fa-code-fork"></span> Fork
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/onokumus/metisMenu">
|
||||
<span class="fa fa-fw fa-star"></span> Star
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/onokumus/metisMenu/issues">
|
||||
<span class="fa fa-fw fa-exclamation-triangle"></span> Issues
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 0</a>
|
||||
<ul>
|
||||
<li><a href="#">item 0.1</a></li>
|
||||
<li><a href="#">item 0.2</a></li>
|
||||
<li><a href="https://onokumus.com">onokumus</a></li>
|
||||
<li><a href="#">item 0.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li id="removable">
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 1</a>
|
||||
<ul>
|
||||
<li><a href="#">item 1.1</a></li>
|
||||
<li><a href="#">item 1.2</a></li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 1.3</a>
|
||||
<ul>
|
||||
<li><a href="#">item 1.3.1</a></li>
|
||||
<li><a href="#">item 1.3.2</a></li>
|
||||
<li><a href="#">item 1.3.3</a></li>
|
||||
<li><a href="#">item 1.3.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">item 1.4</a></li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 1.5</a>
|
||||
<ul>
|
||||
<li><a href="#">item 1.5.1</a></li>
|
||||
<li><a href="#">item 1.5.2</a></li>
|
||||
<li><a href="#">item 1.5.3</a></li>
|
||||
<li><a href="#">item 1.5.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 2</a>
|
||||
<ul>
|
||||
<li><a href="#">item 2.1</a></li>
|
||||
<li><a href="#">item 2.2</a></li>
|
||||
<li><a href="#">item 2.3</a></li>
|
||||
<li><a href="#">item 2.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-md-9">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Delete elements</h5>
|
||||
<button class="btn btn-danger btn-lg" id="deleteElem">
|
||||
remove Menu 1
|
||||
</button>
|
||||
<pre><code class="language-javascript">$(<span class="hljs-string">'#menu1'</span>).metisMenu();
|
||||
|
||||
$(<span class="hljs-string">'#deleteElem'</span>).one(<span class="hljs-string">'click'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">event</span>) </span>{
|
||||
|
||||
$(<span class="hljs-keyword">this</span>).removeClass(<span class="hljs-string">'btn-danger'</span>)
|
||||
.addClass(<span class="hljs-string">'btn-success'</span>)
|
||||
.html(<span class="hljs-string">'Menu 1 removed'</span>)
|
||||
.attr(<span class="hljs-string">'disabled'</span>, <span class="hljs-string">'disabled'</span>);
|
||||
|
||||
$(<span class="hljs-string">'#menu1'</span>).metisMenu(<span class="hljs-string">'dispose'</span>);
|
||||
|
||||
$(<span class="hljs-string">'#menu1 #removable'</span>).remove();
|
||||
|
||||
$(<span class="hljs-string">'#menu1'</span>).metisMenu();
|
||||
});
|
||||
</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="assets/js/mm-dispose.js"></script>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,387 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<title>metisMenu - docs</title>
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/metismenu/dist/metisMenu.min.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs/themes/prism.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noty/lib/noty.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noty/lib/themes/relax.css">
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/elektron/dist/elektron.min.css">
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/jquery"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="https://unpkg.com/metismenu"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/prismjs"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/noty"></script>
|
||||
|
||||
<style>
|
||||
@media (min-width: 992px) {
|
||||
.elk-app {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.elk-container,
|
||||
.elk-main,
|
||||
.elk-side {
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<!-- BEGIN .elk-app -->
|
||||
<div class="elk-app">
|
||||
<!-- BEGIN .elk-wrap -->
|
||||
<div class="elk-wrap">
|
||||
<!-- BEGIN .elk-header -->
|
||||
<header class="elk-header ">
|
||||
<div class="navbar navbar-expand-md navbar-dark bg-dark box-shadow">
|
||||
<div class="container d-flex justify-content-between">
|
||||
<a href="index.html" class="navbar-brand d-flex align-items-center">
|
||||
<strong>metisMenu</strong>
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
|
||||
aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
|
||||
<ul class="navbar-nav ml-auto">
|
||||
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown"
|
||||
aria-haspopup="true" aria-expanded="false">Examples</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown01">
|
||||
<a class="dropdown-item" href="mm-vertical.html">Vertical Menu</a>
|
||||
<a class="dropdown-item" href="mm-horizontal.html">Horizontal Menu</a>
|
||||
<a class="dropdown-item" href="mm-folder.html">Folder View</a>
|
||||
<a class="dropdown-item" href="mm-vertical-hover.html">Hover Option For Desktop</a>
|
||||
<a class="dropdown-item" href="mm-animate.html">Animate</a>
|
||||
<a class="dropdown-item" href="mm-event.html">Event</a>
|
||||
<a class="dropdown-item" href="mm-event2.html">Event 2</a>
|
||||
<a class="dropdown-item" href="mm-dispose.html">Stop & Start metisMenu</a>
|
||||
<a class="dropdown-item" href="mm-ajax.html">Ajax</a>
|
||||
<a class="dropdown-item" href="mm-faq.html">FAQ</a>
|
||||
<a class="dropdown-item" href="mm-bs-card.html">Bootstrap Card</a>
|
||||
<a class="dropdown-item active" href="mm-docs.html">Docs</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown02" data-toggle="dropdown"
|
||||
aria-haspopup="true" aria-expanded="false">Templates</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown02">
|
||||
<a class="dropdown-item" href="https://onokumus.com/chaldene" target="_blank">Chaldene Admin</a>
|
||||
<a class="dropdown-item" href="https://onokumus.com/elektron" target="_blank">Elektron Admin</a>
|
||||
<a class="dropdown-item" href="https://onokumus.com/twbuttons/" target="_blank">twbuttons</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://onokumus.com" target="_blank">onokumus</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- END: .elk-header -->
|
||||
|
||||
<!-- BEGIN .elk-container -->
|
||||
<div class="elk-container flex-column flex-md-row">
|
||||
<!-- BEGIN .elk-side -->
|
||||
<aside class="elk-side is-open bg-light border-right position-relative" id="elk-side">
|
||||
|
||||
<!-- BEGIN .elk-side-content -->
|
||||
<div class="elk-side-content ">
|
||||
<!-- BEGIN .elk-side-nav -->
|
||||
<nav class="elk-side-nav">
|
||||
|
||||
<ul class="nav flex-column" id="menu1">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link text-dark has-arrow" href="#getting-started">Getting Started</a>
|
||||
<ul class="nav flex-column pl-1">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#install">Install</a>
|
||||
<a class="nav-link" href="#download">Download</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link text-dark has-arrow" href="#usage">Usage</a>
|
||||
<ul class="nav flex-column pl-1">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#stopping-list-opening-on-certain-elements">Stopping list opening on
|
||||
certain
|
||||
elements</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link text-dark has-arrow" href="#options">Options</a>
|
||||
<ul class="nav flex-column pl-1">
|
||||
<li class="nav-item"><a class="nav-link" href="#toggle">toggle</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#dispose">dispose</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#preventdefault">preventDefault</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#triggerelement">triggerElement</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#parenttrigger">parentTrigger</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#submenu">subMenu</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item"><a class="nav-link text-dark" href="#events">Events</a></li>
|
||||
<li class="nav-item"><a class="nav-link text-dark" href="#migrating-to-v3-from-v2">Migrating to v3 from
|
||||
v2</a></li>
|
||||
</ul>
|
||||
|
||||
</nav>
|
||||
<!-- END: .elk-side-nav -->
|
||||
</div>
|
||||
<!-- END: .elk-side-content -->
|
||||
|
||||
</aside>
|
||||
<!-- END: .elk-side -->
|
||||
<!-- BEGIN .elk-main -->
|
||||
<div class="elk-main">
|
||||
<!-- BEGIN .elk-main-content -->
|
||||
<div class="elk-main-content">
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
|
||||
<div class="col">
|
||||
<h2 id="getting-started">Getting started</h2>
|
||||
<h3 id="install">Install</h3>
|
||||
<p>Install with <a href="https://www.npmjs.com/">npm</a>:</p>
|
||||
<pre><code class="lang-sh">$ npm <span class="hljs-keyword">install</span> <span class="hljs-comment">--save metismenu</span>
|
||||
</code></pre>
|
||||
<p>Install with <a href="https://yarnpkg.com">yarn</a>:</p>
|
||||
<pre><code class="lang-sh">$ yarn <span class="hljs-keyword">add</span><span class="bash"> metismenu</span>
|
||||
</code></pre>
|
||||
<p>Install with <a href="https://getcomposer.org/">composer</a></p>
|
||||
<pre><code class="lang-sh">$ composer <span class="hljs-keyword">require</span> onokumus/<span class="hljs-symbol">metismenu:</span>dev-master
|
||||
</code></pre>
|
||||
<h3 id="download">Download</h3>
|
||||
<p><a href="https://github.com/onokumus/metisMenu/archive/master.zip">download</a></p>
|
||||
<h2 id="usage">Usage</h2>
|
||||
<ol>
|
||||
<li>
|
||||
<p>Include metismenu StyleSheet</p>
|
||||
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://unpkg.com/metismenu/dist/metisMenu.min.css"</span>></span>
|
||||
<span class="hljs-comment"><!-- OR --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/metismenu/dist/metisMenu.min.css"</span>></span>
|
||||
</code></pre>
|
||||
</li>
|
||||
<li>
|
||||
<p>Include jQuery</p>
|
||||
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://unpkg.com/jquery"</span>></span><span class="undefined"></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
|
||||
<span class="hljs-comment"><!-- OR --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/jquery"</span>></span><span class="undefined"></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
|
||||
</code></pre>
|
||||
</li>
|
||||
<li>
|
||||
<p>Include metisMenu plugin's code</p>
|
||||
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://unpkg.com/metismenu"</span>></span><span class="undefined"></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
|
||||
<span class="hljs-comment"><!-- OR --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/metismenu"</span>></span><span class="undefined"></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
|
||||
</code></pre>
|
||||
</li>
|
||||
<li>
|
||||
<p>Add id attribute to unordered list</p>
|
||||
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"metismenu"</span>></span>
|
||||
|
||||
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
|
||||
</code></pre>
|
||||
</li>
|
||||
<li>
|
||||
<p>Make expand/collapse controls accessible</p>
|
||||
<blockquote>
|
||||
<p>Be sure to add <code>aria-expanded</code> to the element <code>a</code>. This attribute
|
||||
explicitly
|
||||
defines
|
||||
the current state of the collapsible element to screen readers and similar assistive
|
||||
technologies. If
|
||||
the
|
||||
collapsible element is closed by default, it should have a value of
|
||||
<code>aria-expanded="false"</code>.
|
||||
If you've set the collapsible element's parent <code>li</code> element to be open by
|
||||
default
|
||||
using
|
||||
the <code>mm-active</code> class, set <code>aria-expanded="true"</code> on the
|
||||
control
|
||||
instead.
|
||||
The plugin will automatically toggle this attribute based on whether or not the collapsible
|
||||
element has
|
||||
been opened or closed.</p>
|
||||
</blockquote>
|
||||
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"metismenu"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mm-active"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">aria-expanded</span>=<span class="hljs-string">"true"</span>></span>Menu 1<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">ul</span>></span>
|
||||
...
|
||||
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">aria-expanded</span>=<span class="hljs-string">"false"</span>></span>Menu 2<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">ul</span>></span>
|
||||
...
|
||||
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
...
|
||||
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
|
||||
</code></pre>
|
||||
</li>
|
||||
<li>
|
||||
<p>Arrow Options</p>
|
||||
<blockquote>
|
||||
<p>add <code>has-arrow</code> class to <code>a</code> element</p>
|
||||
</blockquote>
|
||||
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"metismenu"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mm-active"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"has-arrow"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">aria-expanded</span>=<span class="hljs-string">"true"</span>></span>Menu 1<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">ul</span>></span>
|
||||
...
|
||||
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"has-arrow"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">aria-expanded</span>=<span class="hljs-string">"false"</span>></span>Menu 2<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">ul</span>></span>
|
||||
...
|
||||
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
...
|
||||
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
|
||||
</code></pre>
|
||||
</li>
|
||||
<li>
|
||||
<p>Call the plugin:</p>
|
||||
<pre><code class="lang-javascript"> <span class="hljs-variable">$(</span><span class="hljs-string">"#metismenu"</span>).metisMenu();
|
||||
</code></pre>
|
||||
</li>
|
||||
</ol>
|
||||
<h3 id="stopping-list-opening-on-certain-elements">Stopping list opening on certain elements</h3>
|
||||
<p>Setting aria-disabled="true" in the <code><a></code> element as shown will stop
|
||||
metisMenu
|
||||
opening the menu for that particular list. This can be changed dynamically and will be obeyed
|
||||
correctly:</p>
|
||||
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">aria-expanded</span>=<span class="hljs-string">"false"</span> <span class="hljs-attr">aria-disabled</span>=<span class="hljs-string">"true"</span>></span>List 1<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
|
||||
</code></pre>
|
||||
<h2 id="options">Options</h2>
|
||||
<h4 id="toggle">toggle</h4>
|
||||
<p>Type: <code>Boolean</code>
|
||||
Default: <code>true</code></p>
|
||||
<p>For auto collapse support.</p>
|
||||
<pre><code class="lang-javascript"> <span class="hljs-variable">$(</span><span class="hljs-string">"#metismenu"</span>).metisMenu({
|
||||
<span class="hljs-symbol">toggle:</span> <span class="hljs-keyword">false</span>
|
||||
});
|
||||
</code></pre>
|
||||
<h4 id="dispose">dispose</h4>
|
||||
<p>Type: <code>String</code>
|
||||
Default: <code>null</code></p>
|
||||
<p>For stop and destroy metisMenu.</p>
|
||||
<pre><code class="lang-javascript"> <span class="hljs-variable">$(</span><span class="hljs-string">"#metismenu"</span>).metisMenu(<span class="hljs-string">'dispose'</span>);
|
||||
</code></pre>
|
||||
<h4 id="preventdefault">preventDefault</h4>
|
||||
<p>Type: <code>Boolean</code>
|
||||
Default: <code>true</code></p>
|
||||
<blockquote>
|
||||
<p>Prevents or allows dropdowns' onclick events after expanding/collapsing.</p>
|
||||
</blockquote>
|
||||
<pre><code class="lang-javascript"> <span class="hljs-variable">$(</span><span class="hljs-string">"#menu"</span>).metisMenu({
|
||||
<span class="hljs-symbol">preventDefault:</span> <span class="hljs-keyword">false</span>
|
||||
});
|
||||
</code></pre>
|
||||
<p><em>since from version 2.7.0</em></p>
|
||||
<h4 id="triggerelement">triggerElement</h4>
|
||||
<p>Type: <code>jQuery selector</code>
|
||||
Default: <code>a</code></p>
|
||||
<pre><code class="lang-javascript"> <span class="hljs-symbol">$</span>(<span class="hljs-string">"#metismenu"</span>).metisMenu({
|
||||
triggerElement: <span class="hljs-string">'.nav-link'</span> <span class="hljs-comment">// bootstrap 4</span>
|
||||
});
|
||||
</code></pre>
|
||||
<h4 id="parenttrigger">parentTrigger</h4>
|
||||
<p>Type: <code>jQuery selector</code>
|
||||
Default: <code>li</code></p>
|
||||
<pre><code class="lang-javascript"> <span class="hljs-symbol">$</span>(<span class="hljs-string">"#metismenu"</span>).metisMenu({
|
||||
parentTrigger: <span class="hljs-string">'.nav-item'</span> <span class="hljs-comment">// bootstrap 4</span>
|
||||
});
|
||||
</code></pre>
|
||||
<h4 id="submenu">subMenu</h4>
|
||||
<p>Type: <code>jQuery selector</code>
|
||||
Default: <code>ul</code></p>
|
||||
<pre><code class="lang-javascript"> <span class="hljs-symbol">$</span>(<span class="hljs-string">"#metismenu"</span>).metisMenu({
|
||||
subMenu: <span class="hljs-string">'.nav.flex-column'</span> <span class="hljs-comment">// bootstrap 4</span>
|
||||
});
|
||||
</code></pre>
|
||||
<h2 id="events">Events</h2>
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th><strong>Event Type</strong></th>
|
||||
<th><strong>Description</strong></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>show.metisMenu</td>
|
||||
<td>This event fires immediately when the <code>_show</code> instance method is called.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>shown.metisMenu</td>
|
||||
<td>This event is fired when a collapse <code>ul</code> element has been made visible to the
|
||||
user (will
|
||||
wait
|
||||
for CSS transitions to complete).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>hide.metisMenu</td>
|
||||
<td>This event is fired immediately when the <code>_hide</code> method has been called.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>hidden.metisMenu</td>
|
||||
<td>This event is fired when a collapse <code>ul</code> element has been hidden from the user
|
||||
(will wait
|
||||
for
|
||||
CSS transitions to complete).</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h2 id="migrating-to-v3-from-v2">Migrating to v3 from v2</h2>
|
||||
<ul>
|
||||
<li>Update <code>metisMenu.js</code> & <code>metisMenu.css</code> files</li>
|
||||
<li>Change <code>active</code> class to <code>mm-active</code></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- END: .elk-main-content -->
|
||||
</div>
|
||||
<!-- END: .elk-main -->
|
||||
</div>
|
||||
<!-- END: .elk-container -->
|
||||
</div>
|
||||
<!-- END: .elk-wrap -->
|
||||
|
||||
</div>
|
||||
<!-- END: .elk-app -->
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
$(function () {
|
||||
$('#menu1').metisMenu();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,203 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<title>metisMenu - events</title>
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/metismenu/dist/metisMenu.min.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs/themes/prism.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noty/lib/noty.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noty/lib/themes/relax.css">
|
||||
|
||||
<link rel="stylesheet" href="assets/css/app.css">
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/jquery"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="https://unpkg.com/metismenu"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/prismjs"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/noty"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div class="navbar navbar-expand-md navbar-dark bg-dark box-shadow">
|
||||
<div class="container d-flex justify-content-between">
|
||||
<a href="index.html" class="navbar-brand d-flex align-items-center">
|
||||
<strong>metisMenu</strong>
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
|
||||
aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
|
||||
<ul class="navbar-nav ml-auto">
|
||||
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">Examples</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown01">
|
||||
<a class="dropdown-item" href="mm-vertical.html">Vertical Menu</a>
|
||||
<a class="dropdown-item" href="mm-horizontal.html">Horizontal Menu</a>
|
||||
<a class="dropdown-item" href="mm-folder.html">Folder View</a>
|
||||
<a class="dropdown-item" href="mm-vertical-hover.html">Hover Option For Desktop</a>
|
||||
<a class="dropdown-item" href="mm-animate.html">Animate</a>
|
||||
<a class="dropdown-item" href="mm-event.html">Event</a>
|
||||
<a class="dropdown-item" href="mm-event2.html">Event 2</a>
|
||||
<a class="dropdown-item" href="mm-dispose.html">Stop & Start metisMenu</a>
|
||||
<a class="dropdown-item" href="mm-ajax.html">Ajax</a>
|
||||
<a class="dropdown-item" href="mm-faq.html">FAQ</a>
|
||||
<a class="dropdown-item" href="mm-bs-card.html">Bootstrap Card</a><a class="dropdown-item" href="mm-docs.html">Docs</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown02" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">Templates</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown02">
|
||||
<a class="dropdown-item" href="https://onokumus.com/chaldene" target="_blank">Chaldene Admin</a>
|
||||
<a class="dropdown-item" href="https://onokumus.com/elektron" target="_blank">Elektron Admin</a>
|
||||
<a class="dropdown-item" href="https://onokumus.com/twbuttons/" target="_blank">twbuttons</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://onokumus.com" target="_blank">onokumus</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="container">
|
||||
<link href="assets/css/mm-vertical.css" rel="stylesheet" type="text/css"/>
|
||||
|
||||
<section class="jumbotron text-center">
|
||||
<h2 class="jumbotron-heading">Event</h2>
|
||||
<a class="btn btn-outline-info" href="assets/css/mm-vertical.css" target="_top">
|
||||
<i class="fa fa-fw fa-css3"></i>
|
||||
Download CSS
|
||||
</a>
|
||||
<a class="btn btn-outline-warning" href="assets/js/mm-event.js" target="_top">
|
||||
<i class="fa fa-fw fa-file-code-o"></i>
|
||||
Download JS</a>
|
||||
</section>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<nav class="sidebar-nav">
|
||||
<ul class="metismenu" id="menu">
|
||||
<li>
|
||||
<a class="has-arrow" href="#">
|
||||
<span class="fa fa-fw fa-github fa-lg"></span>
|
||||
metisMenu
|
||||
</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://github.com/onokumus/metisMenu">
|
||||
<span class="fa fa-fw fa-code-fork"></span> Fork
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/onokumus/metisMenu">
|
||||
<span class="fa fa-fw fa-star"></span> Star
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/onokumus/metisMenu/issues">
|
||||
<span class="fa fa-fw fa-exclamation-triangle"></span> Issues
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 0</a>
|
||||
<ul>
|
||||
<li><a href="#">item 0.1</a></li>
|
||||
<li><a href="#">item 0.2</a></li>
|
||||
<li><a href="https://onokumus.com">onokumus</a></li>
|
||||
<li><a href="#">item 0.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li id="removable">
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 1</a>
|
||||
<ul>
|
||||
<li><a href="#">item 1.1</a></li>
|
||||
<li><a href="#">item 1.2</a></li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 1.3</a>
|
||||
<ul>
|
||||
<li><a href="#">item 1.3.1</a></li>
|
||||
<li><a href="#">item 1.3.2</a></li>
|
||||
<li><a href="#">item 1.3.3</a></li>
|
||||
<li><a href="#">item 1.3.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">item 1.4</a></li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 1.5</a>
|
||||
<ul>
|
||||
<li><a href="#">item 1.5.1</a></li>
|
||||
<li><a href="#">item 1.5.2</a></li>
|
||||
<li><a href="#">item 1.5.3</a></li>
|
||||
<li><a href="#">item 1.5.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 2</a>
|
||||
<ul>
|
||||
<li><a href="#">item 2.1</a></li>
|
||||
<li><a href="#">item 2.2</a></li>
|
||||
<li><a href="#">item 2.3</a></li>
|
||||
<li><a href="#">item 2.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="col-md-9">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Event</h5>
|
||||
|
||||
<pre><code class="language-javascript">$(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
|
||||
|
||||
$(<span class="hljs-string">'#menu'</span>).metisMenu()
|
||||
.on(<span class="hljs-string">'show.metisMenu'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">event</span>) </span>{
|
||||
|
||||
<span class="hljs-comment">// do something…</span>
|
||||
|
||||
}).on(<span class="hljs-string">'shown.metisMenu'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">event</span>) </span>{
|
||||
|
||||
<span class="hljs-comment">// do something…</span>
|
||||
|
||||
}).on(<span class="hljs-string">'hide.metisMenu'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">event</span>) </span>{
|
||||
|
||||
<span class="hljs-comment">// do something…</span>
|
||||
|
||||
}).on(<span class="hljs-string">'hidden.metisMenu'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">event</span>) </span>{
|
||||
|
||||
<span class="hljs-comment">// do something…</span>
|
||||
|
||||
});
|
||||
});
|
||||
</code></pre>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="assets/js/mm-event.js"></script>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,603 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<title>metisMenu - events 2</title>
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/metismenu/dist/metisMenu.min.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs/themes/prism.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noty/lib/noty.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noty/lib/themes/relax.css">
|
||||
|
||||
<link rel="stylesheet" href="assets/css/app.css">
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/jquery"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="https://unpkg.com/metismenu"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/prismjs"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/noty"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div class="navbar navbar-expand-md navbar-dark bg-dark box-shadow">
|
||||
<div class="container d-flex justify-content-between">
|
||||
<a href="index.html" class="navbar-brand d-flex align-items-center">
|
||||
<strong>metisMenu</strong>
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
|
||||
aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
|
||||
<ul class="navbar-nav ml-auto">
|
||||
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">Examples</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown01">
|
||||
<a class="dropdown-item" href="mm-vertical.html">Vertical Menu</a>
|
||||
<a class="dropdown-item" href="mm-horizontal.html">Horizontal Menu</a>
|
||||
<a class="dropdown-item" href="mm-folder.html">Folder View</a>
|
||||
<a class="dropdown-item" href="mm-vertical-hover.html">Hover Option For Desktop</a>
|
||||
<a class="dropdown-item" href="mm-animate.html">Animate</a>
|
||||
<a class="dropdown-item" href="mm-event.html">Event</a>
|
||||
<a class="dropdown-item" href="mm-event2.html">Event 2</a>
|
||||
<a class="dropdown-item" href="mm-dispose.html">Stop & Start metisMenu</a>
|
||||
<a class="dropdown-item" href="mm-ajax.html">Ajax</a>
|
||||
<a class="dropdown-item" href="mm-faq.html">FAQ</a>
|
||||
<a class="dropdown-item" href="mm-bs-card.html">Bootstrap Card</a><a class="dropdown-item" href="mm-docs.html">Docs</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown02" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">Templates</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown02">
|
||||
<a class="dropdown-item" href="https://onokumus.com/chaldene" target="_blank">Chaldene Admin</a>
|
||||
<a class="dropdown-item" href="https://onokumus.com/elektron" target="_blank">Elektron Admin</a>
|
||||
<a class="dropdown-item" href="https://onokumus.com/twbuttons/" target="_blank">twbuttons</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://onokumus.com" target="_blank">onokumus</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="container">
|
||||
<link href="assets/css/mm-vertical.css" rel="stylesheet" type="text/css"/>
|
||||
<section class="jumbotron text-center">
|
||||
<h2 class="jumbotron-heading">Events</h2>
|
||||
<a class="btn btn-outline-info" href="assets/css/mm-vertical.css" target="_top">
|
||||
<i class="fa fa-fw fa-css3"></i>
|
||||
Download CSS
|
||||
</a>
|
||||
<a class="btn btn-outline-warning" href="assets/js/mm-event2.js" target="_top">
|
||||
<i class="fa fa-fw fa-file-code-o"></i>
|
||||
Download JS</a>
|
||||
</section>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<nav class="sidebar-nav">
|
||||
<ul class="metismenu" id="menu">
|
||||
<li class="mm-active">
|
||||
<a href="#" aria-expanded="true">
|
||||
<span class="sidebar-nav-item-icon fa fa-github fa-lg"></span>
|
||||
<span class="sidebar-nav-item">metisMenu</span>
|
||||
<span class="fa arrow"></span>
|
||||
</a>
|
||||
<ul>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
<li><a href="#">item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" aria-expanded="false">
|
||||
Menu 1<span class="fa arrow"></span>
|
||||
</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">Sub Menu 1</a>
|
||||
<ul class="animated bounceIn">
|
||||
<li>
|
||||
<a href="#">item</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Sub Menu 2</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">item</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" aria-expanded="false">
|
||||
Menu 2<span class="fa arrow"></span>
|
||||
</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">Sub Menu 2</a>
|
||||
<ul class="animated bounceIn">
|
||||
<li>
|
||||
<a href="#">item</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Sub Menu 2</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">item</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" aria-expanded="false">
|
||||
Menu 3<span class="fa arrow"></span>
|
||||
</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">Sub Menu 3</a>
|
||||
<ul class="animated bounceIn">
|
||||
<li>
|
||||
<a href="#">item</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Sub Menu 2</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">item</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" aria-expanded="false">
|
||||
Menu 4<span class="fa arrow"></span>
|
||||
</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">Sub Menu 4</a>
|
||||
<ul class="animated bounceIn">
|
||||
<li>
|
||||
<a href="#">item</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Sub Menu 2</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">item</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" aria-expanded="false">
|
||||
Menu 5<span class="fa arrow"></span>
|
||||
</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">Sub Menu 5</a>
|
||||
<ul class="animated bounceIn">
|
||||
<li>
|
||||
<a href="#">item</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Sub Menu 2</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">item</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="col-md-9">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Events
|
||||
<small>Thanks <a href="http://callmecavs.com/jump.js/" target="_blank">callmecavs</a> for jump.js</small>
|
||||
</h5>
|
||||
|
||||
<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="javascript">
|
||||
$(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
|
||||
$(<span class="hljs-string">'#menu'</span>)
|
||||
.metisMenu()
|
||||
.on(<span class="hljs-string">'shown.metisMenu'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">event</span>) </span>{
|
||||
Jump(<span class="hljs-string">"#menu"</span>)
|
||||
});
|
||||
});
|
||||
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
|
||||
</code></pre>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
<p>
|
||||
...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="https://cdn.jsdelivr.net/npm/jump.js"></script>
|
||||
<script src="assets/js/mm-event2.js"></script>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,145 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<title>metisMenu - FAQ</title>
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/metismenu/dist/metisMenu.min.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs/themes/prism.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noty/lib/noty.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noty/lib/themes/relax.css">
|
||||
|
||||
<link rel="stylesheet" href="assets/css/app.css">
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/jquery"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="https://unpkg.com/metismenu"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/prismjs"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/noty"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div class="navbar navbar-expand-md navbar-dark bg-dark box-shadow">
|
||||
<div class="container d-flex justify-content-between">
|
||||
<a href="index.html" class="navbar-brand d-flex align-items-center">
|
||||
<strong>metisMenu</strong>
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
|
||||
aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
|
||||
<ul class="navbar-nav ml-auto">
|
||||
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">Examples</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown01">
|
||||
<a class="dropdown-item" href="mm-vertical.html">Vertical Menu</a>
|
||||
<a class="dropdown-item" href="mm-horizontal.html">Horizontal Menu</a>
|
||||
<a class="dropdown-item" href="mm-folder.html">Folder View</a>
|
||||
<a class="dropdown-item" href="mm-vertical-hover.html">Hover Option For Desktop</a>
|
||||
<a class="dropdown-item" href="mm-animate.html">Animate</a>
|
||||
<a class="dropdown-item" href="mm-event.html">Event</a>
|
||||
<a class="dropdown-item" href="mm-event2.html">Event 2</a>
|
||||
<a class="dropdown-item" href="mm-dispose.html">Stop & Start metisMenu</a>
|
||||
<a class="dropdown-item" href="mm-ajax.html">Ajax</a>
|
||||
<a class="dropdown-item" href="mm-faq.html">FAQ</a>
|
||||
<a class="dropdown-item" href="mm-bs-card.html">Bootstrap Card</a><a class="dropdown-item" href="mm-docs.html">Docs</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown02" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">Templates</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown02">
|
||||
<a class="dropdown-item" href="https://onokumus.com/chaldene" target="_blank">Chaldene Admin</a>
|
||||
<a class="dropdown-item" href="https://onokumus.com/elektron" target="_blank">Elektron Admin</a>
|
||||
<a class="dropdown-item" href="https://onokumus.com/twbuttons/" target="_blank">twbuttons</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://onokumus.com" target="_blank">onokumus</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="container">
|
||||
<link rel="stylesheet" href="assets/css/mm-faq.css">
|
||||
|
||||
|
||||
<section class="jumbotron text-center">
|
||||
<h2 class="jumbotron-heading">Faq</h2>
|
||||
<a class="btn btn-outline-info" href="assets/css/mm-faq.css" target="_top">
|
||||
<i class="fa fa-fw fa-css3"></i>
|
||||
Download CSS
|
||||
</a>
|
||||
<a class="btn btn-outline-warning" href="assets/js/mm-faq.js" target="_top">
|
||||
<i class="fa fa-fw fa-file-code-o"></i>
|
||||
Download JS</a>
|
||||
</section>
|
||||
|
||||
|
||||
<div class="container">
|
||||
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<h2 class="panel-title">FAQ <small>metisMenu version 2.7.x</small></h2>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div class="metismenu faq-menu">
|
||||
|
||||
<div class="faq-item mb-2">
|
||||
<h4 class="faq-link has-arrow">Question 1</h4>
|
||||
<div class="faq-answer text-muted">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item mb-2">
|
||||
<h4 class="faq-link has-arrow">Question 2</h4>
|
||||
<div class="faq-answer text-muted">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item mb-2">
|
||||
<h4 class="faq-link has-arrow">Question 3</h4>
|
||||
<div class="faq-answer text-muted">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<pre><code class="language-javascript">$(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
|
||||
|
||||
$(<span class="hljs-string">'.faq-menu'</span>).metisMenu({
|
||||
<span class="hljs-attr">toggle</span>: <span class="hljs-literal">false</span>,
|
||||
<span class="hljs-attr">triggerElement</span>: <span class="hljs-string">'.faq-link'</span>,
|
||||
<span class="hljs-attr">parentTrigger</span>: <span class="hljs-string">'.faq-item'</span>,
|
||||
<span class="hljs-attr">subMenu</span>: <span class="hljs-string">'.faq-answer'</span>
|
||||
});
|
||||
|
||||
});
|
||||
</code></pre>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="assets/js/mm-faq.js"></script>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,246 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<title>metisMenu - folder view</title>
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/metismenu/dist/metisMenu.min.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs/themes/prism.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noty/lib/noty.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noty/lib/themes/relax.css">
|
||||
|
||||
<link rel="stylesheet" href="assets/css/app.css">
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/jquery"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="https://unpkg.com/metismenu"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/prismjs"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/noty"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div class="navbar navbar-expand-md navbar-dark bg-dark box-shadow">
|
||||
<div class="container d-flex justify-content-between">
|
||||
<a href="index.html" class="navbar-brand d-flex align-items-center">
|
||||
<strong>metisMenu</strong>
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
|
||||
aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
|
||||
<ul class="navbar-nav ml-auto">
|
||||
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">Examples</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown01">
|
||||
<a class="dropdown-item" href="mm-vertical.html">Vertical Menu</a>
|
||||
<a class="dropdown-item" href="mm-horizontal.html">Horizontal Menu</a>
|
||||
<a class="dropdown-item" href="mm-folder.html">Folder View</a>
|
||||
<a class="dropdown-item" href="mm-vertical-hover.html">Hover Option For Desktop</a>
|
||||
<a class="dropdown-item" href="mm-animate.html">Animate</a>
|
||||
<a class="dropdown-item" href="mm-event.html">Event</a>
|
||||
<a class="dropdown-item" href="mm-event2.html">Event 2</a>
|
||||
<a class="dropdown-item" href="mm-dispose.html">Stop & Start metisMenu</a>
|
||||
<a class="dropdown-item" href="mm-ajax.html">Ajax</a>
|
||||
<a class="dropdown-item" href="mm-faq.html">FAQ</a>
|
||||
<a class="dropdown-item" href="mm-bs-card.html">Bootstrap Card</a><a class="dropdown-item"
|
||||
href="mm-docs.html">Docs</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown02" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">Templates</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown02">
|
||||
<a class="dropdown-item" href="https://onokumus.com/chaldene" target="_blank">Chaldene Admin</a>
|
||||
<a class="dropdown-item" href="https://onokumus.com/elektron" target="_blank">Elektron Admin</a>
|
||||
<a class="dropdown-item" href="https://onokumus.com/twbuttons/" target="_blank">twbuttons</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://onokumus.com" target="_blank">onokumus</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="container">
|
||||
<link rel="stylesheet" href="assets/css/mm-folder.css">
|
||||
<section class="jumbotron text-center">
|
||||
<h2 class="jumbotron-heading">Folder View</h2>
|
||||
<a class="btn btn-outline-info" href="assets/css/mm-folder.css" target="_top">
|
||||
<i class="fa fa-fw fa-css3"></i>
|
||||
Download CSS
|
||||
</a>
|
||||
<a class="btn btn-outline-warning" href="assets/js/mm-folder.js" target="_top">
|
||||
<i class="fa fa-fw fa-file-code-o"></i>
|
||||
Download JS</a>
|
||||
</section>
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<nav class="nav">
|
||||
<ul class="metisFolder metismenu">
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="fa fa-fw fa-folder-o"></span>
|
||||
Root
|
||||
</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="fa fa-fw fa-file"></span>
|
||||
File 1
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="fa fa-fw fa-folder-o"></span>
|
||||
Folder
|
||||
</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="fa fa-fw fa-file"></span>
|
||||
File 1
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="fa fa-fw fa-folder-o"></span>
|
||||
Folder
|
||||
</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="fa fa-fw fa-file"></span>
|
||||
File 1
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="fa fa-fw fa-file-excel-o text-danger"></span>
|
||||
Excel
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="fa fa-fw fa-file-pdf-o"></span>
|
||||
PDF
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="fa fa-fw fa-file-pdf-o"></span>
|
||||
PDF
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="fa fa-fw fa-folder-o"></span>
|
||||
Folder
|
||||
</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="fa fa-fw fa-file"></span>
|
||||
File 1
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="fa fa-fw fa-folder-o"></span>
|
||||
Folder
|
||||
</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="fa fa-fw fa-file"></span>
|
||||
File 1
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="fa fa-fw fa-file-excel-o text-danger"></span>
|
||||
Excel
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="fa fa-fw fa-file-pdf-o"></span>
|
||||
PDF
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="fa fa-fw fa-file-pdf-o"></span>
|
||||
PDF
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="fa fa-fw fa-file-pdf-o"></span>
|
||||
PDF
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="fa fa-fw fa-file-pdf-o"></span>
|
||||
PDF2
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="fa fa-fw fa-file-pdf-o"></span>
|
||||
PDF
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-md-8">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Folder View <small>default</small></h5>
|
||||
<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="javascript">
|
||||
$(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
|
||||
|
||||
$(<span class="hljs-string">'.metisFolder'</span>).metisMenu({
|
||||
<span class="hljs-attr">toggle</span>: <span class="hljs-literal">false</span>
|
||||
});
|
||||
|
||||
});
|
||||
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
|
||||
</code></pre>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="assets/js/mm-folder.js" charset="utf-8"></script>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,242 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<title>metisMenu - horizontal menu</title>
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/metismenu/dist/metisMenu.min.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs/themes/prism.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noty/lib/noty.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noty/lib/themes/relax.css">
|
||||
|
||||
<link rel="stylesheet" href="assets/css/app.css">
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/jquery"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="https://unpkg.com/metismenu"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/prismjs"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/noty"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div class="navbar navbar-expand-md navbar-dark bg-dark box-shadow">
|
||||
<div class="container d-flex justify-content-between">
|
||||
<a href="index.html" class="navbar-brand d-flex align-items-center">
|
||||
<strong>metisMenu</strong>
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
|
||||
aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
|
||||
<ul class="navbar-nav ml-auto">
|
||||
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">Examples</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown01">
|
||||
<a class="dropdown-item" href="mm-vertical.html">Vertical Menu</a>
|
||||
<a class="dropdown-item" href="mm-horizontal.html">Horizontal Menu</a>
|
||||
<a class="dropdown-item" href="mm-folder.html">Folder View</a>
|
||||
<a class="dropdown-item" href="mm-vertical-hover.html">Hover Option For Desktop</a>
|
||||
<a class="dropdown-item" href="mm-animate.html">Animate</a>
|
||||
<a class="dropdown-item" href="mm-event.html">Event</a>
|
||||
<a class="dropdown-item" href="mm-event2.html">Event 2</a>
|
||||
<a class="dropdown-item" href="mm-dispose.html">Stop & Start metisMenu</a>
|
||||
<a class="dropdown-item" href="mm-ajax.html">Ajax</a>
|
||||
<a class="dropdown-item" href="mm-faq.html">FAQ</a>
|
||||
<a class="dropdown-item" href="mm-bs-card.html">Bootstrap Card</a><a class="dropdown-item" href="mm-docs.html">Docs</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown02" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">Templates</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown02">
|
||||
<a class="dropdown-item" href="https://onokumus.com/chaldene" target="_blank">Chaldene Admin</a>
|
||||
<a class="dropdown-item" href="https://onokumus.com/elektron" target="_blank">Elektron Admin</a>
|
||||
<a class="dropdown-item" href="https://onokumus.com/twbuttons/" target="_blank">twbuttons</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://onokumus.com" target="_blank">onokumus</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="container">
|
||||
<link rel="stylesheet" href="assets/css/mm-horizontal.css">
|
||||
<section class="jumbotron text-center">
|
||||
<h2 class="jumbotron-heading">Horizontal Menu <small class="text-muted">responsive</small></h2>
|
||||
<a class="btn btn-outline-info" href="assets/css/mm-horizontal.css" target="_top">
|
||||
<i class="fa fa-fw fa-css3"></i>
|
||||
Download CSS
|
||||
</a>
|
||||
<a class="btn btn-outline-warning" href="assets/js/mm-horizontal.js" target="_top">
|
||||
<i class="fa fa-fw fa-file-code-o"></i>
|
||||
Download JS</a>
|
||||
</section>
|
||||
<header class="mb-5 pb-5">
|
||||
<div class="pb-5">
|
||||
<h3>Clickable & Responsive <small>default</small></h3>
|
||||
<nav class="topbar-nav">
|
||||
<ul class="metismenu" id="menu1">
|
||||
<li>
|
||||
<a class="has-arrow" href="#">
|
||||
<span class="fa fa-fw fa-github fa-lg"></span>
|
||||
metisMenu
|
||||
</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://github.com/onokumus/metisMenu">
|
||||
<span class="fa fa-fw fa-code-fork"></span> Fork
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/onokumus/metisMenu">
|
||||
<span class="fa fa-fw fa-star"></span> Star
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/onokumus/metisMenu/issues">
|
||||
<span class="fa fa-fw fa-exclamation-triangle"></span> Issues
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 0</a>
|
||||
<ul>
|
||||
<li><a href="#">item 0.1</a></li>
|
||||
<li><a href="#">item 0.2</a></li>
|
||||
<li><a href="https://onokumus.com">onokumus</a></li>
|
||||
<li><a href="#">item 0.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li id="removable">
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 1</a>
|
||||
<ul>
|
||||
<li><a href="#">item 1.1</a></li>
|
||||
<li><a href="#">item 1.2</a></li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 1.3</a>
|
||||
<ul>
|
||||
<li><a href="#">item 1.3.1</a></li>
|
||||
<li><a href="#">item 1.3.2</a></li>
|
||||
<li><a href="#">item 1.3.3</a></li>
|
||||
<li><a href="#">item 1.3.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">item 1.4</a></li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 1.5</a>
|
||||
<ul>
|
||||
<li><a href="#">item 1.5.1</a></li>
|
||||
<li><a href="#">item 1.5.2</a></li>
|
||||
<li><a href="#">item 1.5.3</a></li>
|
||||
<li><a href="#">item 1.5.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 2</a>
|
||||
<ul>
|
||||
<li><a href="#">item 2.1</a></li>
|
||||
<li><a href="#">item 2.2</a></li>
|
||||
<li><a href="#">item 2.3</a></li>
|
||||
<li><a href="#">item 2.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="pt-3 pb-5 mb-5">
|
||||
<h3>Hoverable for Desktop & Responsive</h3>
|
||||
<nav class="topbar-nav is-hoverable">
|
||||
<ul class="metismenu" id="menu2">
|
||||
<li>
|
||||
<a class="has-arrow" href="#">
|
||||
<span class="fa fa-fw fa-github fa-lg"></span>
|
||||
metisMenu
|
||||
</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://github.com/onokumus/metisMenu">
|
||||
<span class="fa fa-fw fa-code-fork"></span> Fork
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/onokumus/metisMenu">
|
||||
<span class="fa fa-fw fa-star"></span> Star
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/onokumus/metisMenu/issues">
|
||||
<span class="fa fa-fw fa-exclamation-triangle"></span> Issues
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 0</a>
|
||||
<ul>
|
||||
<li><a href="#">item 0.1</a></li>
|
||||
<li><a href="#">item 0.2</a></li>
|
||||
<li><a href="https://onokumus.com">onokumus</a></li>
|
||||
<li><a href="#">item 0.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li id="removable">
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 1</a>
|
||||
<ul>
|
||||
<li><a href="#">item 1.1</a></li>
|
||||
<li><a href="#">item 1.2</a></li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 1.3</a>
|
||||
<ul>
|
||||
<li><a href="#">item 1.3.1</a></li>
|
||||
<li><a href="#">item 1.3.2</a></li>
|
||||
<li><a href="#">item 1.3.3</a></li>
|
||||
<li><a href="#">item 1.3.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">item 1.4</a></li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 1.5</a>
|
||||
<ul>
|
||||
<li><a href="#">item 1.5.1</a></li>
|
||||
<li><a href="#">item 1.5.2</a></li>
|
||||
<li><a href="#">item 1.5.3</a></li>
|
||||
<li><a href="#">item 1.5.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 2</a>
|
||||
<ul>
|
||||
<li><a href="#">item 2.1</a></li>
|
||||
<li><a href="#">item 2.2</a></li>
|
||||
<li><a href="#">item 2.3</a></li>
|
||||
<li><a href="#">item 2.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<script src="assets/js/mm-horizontal.js" charset="utf-8"></script>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,185 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<title>metisMenu - hoverable</title>
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/metismenu/dist/metisMenu.min.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs/themes/prism.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noty/lib/noty.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noty/lib/themes/relax.css">
|
||||
|
||||
<link rel="stylesheet" href="assets/css/app.css">
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/jquery"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="https://unpkg.com/metismenu"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/prismjs"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/noty"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div class="navbar navbar-expand-md navbar-dark bg-dark box-shadow">
|
||||
<div class="container d-flex justify-content-between">
|
||||
<a href="index.html" class="navbar-brand d-flex align-items-center">
|
||||
<strong>metisMenu</strong>
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
|
||||
aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
|
||||
<ul class="navbar-nav ml-auto">
|
||||
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">Examples</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown01">
|
||||
<a class="dropdown-item" href="mm-vertical.html">Vertical Menu</a>
|
||||
<a class="dropdown-item" href="mm-horizontal.html">Horizontal Menu</a>
|
||||
<a class="dropdown-item" href="mm-folder.html">Folder View</a>
|
||||
<a class="dropdown-item" href="mm-vertical-hover.html">Hover Option For Desktop</a>
|
||||
<a class="dropdown-item" href="mm-animate.html">Animate</a>
|
||||
<a class="dropdown-item" href="mm-event.html">Event</a>
|
||||
<a class="dropdown-item" href="mm-event2.html">Event 2</a>
|
||||
<a class="dropdown-item" href="mm-dispose.html">Stop & Start metisMenu</a>
|
||||
<a class="dropdown-item" href="mm-ajax.html">Ajax</a>
|
||||
<a class="dropdown-item" href="mm-faq.html">FAQ</a>
|
||||
<a class="dropdown-item" href="mm-bs-card.html">Bootstrap Card</a><a class="dropdown-item"
|
||||
href="mm-docs.html">Docs</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown02" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">Templates</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown02">
|
||||
<a class="dropdown-item" href="https://onokumus.com/chaldene" target="_blank">Chaldene Admin</a>
|
||||
<a class="dropdown-item" href="https://onokumus.com/elektron" target="_blank">Elektron Admin</a>
|
||||
<a class="dropdown-item" href="https://onokumus.com/twbuttons/" target="_blank">twbuttons</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://onokumus.com" target="_blank">onokumus</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="container">
|
||||
<link rel="stylesheet" href="assets/css/mm-vertical-hover.css">
|
||||
<section class="jumbotron text-center">
|
||||
<h2 class="jumbotron-heading">Hoverable Vertical Menu</h2>
|
||||
<a class="btn btn-outline-info" href="assets/css/mm-vertical-hover.css" target="_top">
|
||||
<i class="fa fa-fw fa-css3"></i>
|
||||
Download CSS
|
||||
</a>
|
||||
<a class="btn btn-outline-warning" href="assets/js/mm-vertical-hover.js" target="_top">
|
||||
<i class="fa fa-fw fa-file-code-o"></i>
|
||||
Download JS</a>
|
||||
</section>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<nav class="sidebar-nav">
|
||||
<ul class="metismenu" id="menu1">
|
||||
<li>
|
||||
<a class="has-arrow" href="#">
|
||||
<span class="fa fa-fw fa-github fa-lg"></span>
|
||||
metisMenu
|
||||
</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://github.com/onokumus/metisMenu">
|
||||
<span class="fa fa-fw fa-code-fork"></span> Fork
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/onokumus/metisMenu">
|
||||
<span class="fa fa-fw fa-star"></span> Star
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/onokumus/metisMenu/issues">
|
||||
<span class="fa fa-fw fa-exclamation-triangle"></span> Issues
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 0</a>
|
||||
<ul>
|
||||
<li><a href="#">item 0.1</a></li>
|
||||
<li><a href="#">item 0.2</a></li>
|
||||
<li><a href="https://onokumus.com">onokumus</a></li>
|
||||
<li><a href="#">item 0.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li id="removable">
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 1</a>
|
||||
<ul>
|
||||
<li><a href="#">item 1.1</a></li>
|
||||
<li><a href="#">item 1.2</a></li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 1.3</a>
|
||||
<ul>
|
||||
<li><a href="#">item 1.3.1</a></li>
|
||||
<li><a href="#">item 1.3.2</a></li>
|
||||
<li><a href="#">item 1.3.3</a></li>
|
||||
<li><a href="#">item 1.3.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">item 1.4</a></li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 1.5</a>
|
||||
<ul>
|
||||
<li><a href="#">item 1.5.1</a></li>
|
||||
<li><a href="#">item 1.5.2</a></li>
|
||||
<li><a href="#">item 1.5.3</a></li>
|
||||
<li><a href="#">item 1.5.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 2</a>
|
||||
<ul>
|
||||
<li><a href="#">item 2.1</a></li>
|
||||
<li><a href="#">item 2.2</a></li>
|
||||
<li><a href="#">item 2.3</a></li>
|
||||
<li><a href="#">item 2.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="col-md-9">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Hoverable Vertical Menu</h5>
|
||||
<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="javascript">
|
||||
$(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
|
||||
|
||||
$(<span class="hljs-string">'#menu1'</span>).metisMenu();
|
||||
|
||||
});
|
||||
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
|
||||
</code></pre>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="assets/js/mm-vertical-hover.js" charset="utf-8"></script>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,380 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<title>metisMenu - vertical menu</title>
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/metismenu/dist/metisMenu.min.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs/themes/prism.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noty/lib/noty.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noty/lib/themes/relax.css">
|
||||
|
||||
<link rel="stylesheet" href="assets/css/app.css">
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/jquery"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="https://unpkg.com/metismenu"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/prismjs"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/noty"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div class="navbar navbar-expand-md navbar-dark bg-dark box-shadow">
|
||||
<div class="container d-flex justify-content-between">
|
||||
<a href="index.html" class="navbar-brand d-flex align-items-center">
|
||||
<strong>metisMenu</strong>
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
|
||||
aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
|
||||
<ul class="navbar-nav ml-auto">
|
||||
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">Examples</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown01">
|
||||
<a class="dropdown-item" href="mm-vertical.html">Vertical Menu</a>
|
||||
<a class="dropdown-item" href="mm-horizontal.html">Horizontal Menu</a>
|
||||
<a class="dropdown-item" href="mm-folder.html">Folder View</a>
|
||||
<a class="dropdown-item" href="mm-vertical-hover.html">Hover Option For Desktop</a>
|
||||
<a class="dropdown-item" href="mm-animate.html">Animate</a>
|
||||
<a class="dropdown-item" href="mm-event.html">Event</a>
|
||||
<a class="dropdown-item" href="mm-event2.html">Event 2</a>
|
||||
<a class="dropdown-item" href="mm-dispose.html">Stop & Start metisMenu</a>
|
||||
<a class="dropdown-item" href="mm-ajax.html">Ajax</a>
|
||||
<a class="dropdown-item" href="mm-faq.html">FAQ</a>
|
||||
<a class="dropdown-item" href="mm-bs-card.html">Bootstrap Card</a><a class="dropdown-item"
|
||||
href="mm-docs.html">Docs</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown02" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">Templates</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown02">
|
||||
<a class="dropdown-item" href="https://onokumus.com/chaldene" target="_blank">Chaldene Admin</a>
|
||||
<a class="dropdown-item" href="https://onokumus.com/elektron" target="_blank">Elektron Admin</a>
|
||||
<a class="dropdown-item" href="https://onokumus.com/twbuttons/" target="_blank">twbuttons</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://onokumus.com" target="_blank">onokumus</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="container">
|
||||
<link href="assets/css/mm-vertical.css" rel="stylesheet" type="text/css" />
|
||||
<section class="jumbotron text-center">
|
||||
<h2 class="jumbotron-heading">Vertical Menu</h2>
|
||||
<a class="btn btn-outline-info" href="assets/css/mm-vertical.css" target="_top">
|
||||
<i class="fa fa-fw fa-css3"></i>
|
||||
Download CSS
|
||||
</a>
|
||||
<a class="btn btn-outline-warning" href="assets/js/mm-vertical.js" target="_top">
|
||||
<i class="fa fa-fw fa-file-code-o"></i>
|
||||
Download JS</a>
|
||||
</section>
|
||||
<div class="row">
|
||||
<aside class="col-md-3">
|
||||
<nav class="sidebar-nav">
|
||||
<ul class="metismenu" id="menu1">
|
||||
<li>
|
||||
<a class="has-arrow" href="#">
|
||||
<span class="fa fa-fw fa-github fa-lg"></span>
|
||||
metisMenu
|
||||
</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://github.com/onokumus/metisMenu">
|
||||
<span class="fa fa-fw fa-code-fork"></span> Fork
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/onokumus/metisMenu">
|
||||
<span class="fa fa-fw fa-star"></span> Star
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/onokumus/metisMenu/issues">
|
||||
<span class="fa fa-fw fa-exclamation-triangle"></span> Issues
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 0</a>
|
||||
<ul>
|
||||
<li><a href="#">item 0.1</a></li>
|
||||
<li><a href="#">item 0.2</a></li>
|
||||
<li><a href="https://onokumus.com">onokumus</a></li>
|
||||
<li><a href="#">item 0.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li id="removable">
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 1</a>
|
||||
<ul>
|
||||
<li><a href="#">item 1.1</a></li>
|
||||
<li><a href="#">item 1.2</a></li>
|
||||
<li class="mm-active">
|
||||
<a class="has-arrow" href="#" aria-expanded="true">Menu 1.3</a>
|
||||
<ul>
|
||||
<li><a href="#">item 1.3.1</a></li>
|
||||
<li><a href="#">item 1.3.2</a></li>
|
||||
<li><a href="#">item 1.3.3</a></li>
|
||||
<li><a href="#">item 1.3.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">item 1.4</a></li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 1.5</a>
|
||||
<ul>
|
||||
<li><a href="#">item 1.5.1</a></li>
|
||||
<li><a href="#">item 1.5.2</a></li>
|
||||
<li><a href="#">item 1.5.3</a></li>
|
||||
<li><a href="#">item 1.5.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 2</a>
|
||||
<ul>
|
||||
<li><a href="#">item 2.1</a></li>
|
||||
<li><a href="#">item 2.2</a></li>
|
||||
<li><a href="#">item 2.3</a></li>
|
||||
<li><a href="#">item 2.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</aside>
|
||||
<div class="col-md-9">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Auto Collapse <small>default</small></h5>
|
||||
<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="javascript">
|
||||
$(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
|
||||
|
||||
$(<span class="hljs-string">'#menu1'</span>).metisMenu();
|
||||
|
||||
});
|
||||
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
|
||||
</code></pre>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<nav class="sidebar-nav">
|
||||
<ul class="metismenu" id="menu2">
|
||||
<li>
|
||||
<a class="has-arrow" href="#">
|
||||
<span class="fa fa-fw fa-github fa-lg"></span>
|
||||
metisMenu
|
||||
</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://github.com/onokumus/metisMenu">
|
||||
<span class="fa fa-fw fa-code-fork"></span> Fork
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/onokumus/metisMenu">
|
||||
<span class="fa fa-fw fa-star"></span> Star
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/onokumus/metisMenu/issues">
|
||||
<span class="fa fa-fw fa-exclamation-triangle"></span> Issues
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 0</a>
|
||||
<ul>
|
||||
<li><a href="#">item 0.1</a></li>
|
||||
<li><a href="#">item 0.2</a></li>
|
||||
<li><a href="https://onokumus.com">onokumus</a></li>
|
||||
<li><a href="#">item 0.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li id="removable">
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 1</a>
|
||||
<ul>
|
||||
<li><a href="#">item 1.1</a></li>
|
||||
<li><a href="#">item 1.2</a></li>
|
||||
<li class="mm-active">
|
||||
<a class="has-arrow" href="#" aria-expanded="true">Menu 1.3</a>
|
||||
<ul>
|
||||
<li><a href="#">item 1.3.1</a></li>
|
||||
<li><a href="#">item 1.3.2</a></li>
|
||||
<li><a href="#">item 1.3.3</a></li>
|
||||
<li><a href="#">item 1.3.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">item 1.4</a></li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 1.5</a>
|
||||
<ul>
|
||||
<li><a href="#">item 1.5.1</a></li>
|
||||
<li><a href="#">item 1.5.2</a></li>
|
||||
<li><a href="#">item 1.5.3</a></li>
|
||||
<li><a href="#">item 1.5.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 2</a>
|
||||
<ul>
|
||||
<li><a href="#">item 2.1</a></li>
|
||||
<li><a href="#">item 2.2</a></li>
|
||||
<li><a href="#">item 2.3</a></li>
|
||||
<li><a href="#">item 2.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="col-md-9">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">No Collapse</h5>
|
||||
<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="javascript">
|
||||
$(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
|
||||
|
||||
$(<span class="hljs-string">'#menu2'</span>).metisMenu({ <span class="hljs-attr">toggle</span>: <span class="hljs-literal">false</span> });
|
||||
|
||||
});
|
||||
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
|
||||
</code></pre>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
|
||||
<div class="row text-right" dir="rtl">
|
||||
<div class="col-md-9">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title" id="rtlh3">RTL SUPPORT <small>RTL</small></h5>
|
||||
<div dir="ltr">
|
||||
<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">body</span> <span class="hljs-attr">dir</span>=<span class="hljs-string">"rtl"</span>></span>
|
||||
...
|
||||
<span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="javascript">
|
||||
$(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
|
||||
|
||||
$(<span class="hljs-string">'#menu3'</span>).metisMenu();
|
||||
|
||||
});
|
||||
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
|
||||
</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<nav class="sidebar-nav">
|
||||
<ul class="metismenu" id="menu3">
|
||||
<li>
|
||||
<a class="has-arrow" href="#">
|
||||
<span class="fa fa-fw fa-github fa-lg"></span>
|
||||
metisMenu
|
||||
</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://github.com/onokumus/metisMenu">
|
||||
<span class="fa fa-fw fa-code-fork"></span> Fork
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/onokumus/metisMenu">
|
||||
<span class="fa fa-fw fa-star"></span> Star
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/onokumus/metisMenu/issues">
|
||||
<span class="fa fa-fw fa-exclamation-triangle"></span> Issues
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 0</a>
|
||||
<ul>
|
||||
<li><a href="#">item 0.1</a></li>
|
||||
<li><a href="#">item 0.2</a></li>
|
||||
<li><a href="https://onokumus.com">onokumus</a></li>
|
||||
<li><a href="#">item 0.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li id="removable">
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 1</a>
|
||||
<ul>
|
||||
<li><a href="#">item 1.1</a></li>
|
||||
<li><a href="#">item 1.2</a></li>
|
||||
<li class="mm-active">
|
||||
<a class="has-arrow" href="#" aria-expanded="true">Menu 1.3</a>
|
||||
<ul>
|
||||
<li><a href="#">item 1.3.1</a></li>
|
||||
<li><a href="#">item 1.3.2</a></li>
|
||||
<li><a href="#">item 1.3.3</a></li>
|
||||
<li><a href="#">item 1.3.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">item 1.4</a></li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 1.5</a>
|
||||
<ul>
|
||||
<li><a href="#">item 1.5.1</a></li>
|
||||
<li><a href="#">item 1.5.2</a></li>
|
||||
<li><a href="#">item 1.5.3</a></li>
|
||||
<li><a href="#">item 1.5.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a class="has-arrow" href="#" aria-expanded="false">Menu 2</a>
|
||||
<ul>
|
||||
<li><a href="#">item 2.1</a></li>
|
||||
<li><a href="#">item 2.2</a></li>
|
||||
<li><a href="#">item 2.3</a></li>
|
||||
<li><a href="#">item 2.4</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="assets/js/mm-vertical.js" charset="utf-8"></script>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user