<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Меню</title>
</head>
<body>
<nav class="b-topnav">
<button class="b-menu-toggle js-menu-toggle"><span class="menu-toggle__line"></span></button>
<ul class="b-topmenu__list js-topmenu__list">
<li class="topmenu__item">
<a href="" class="topmenu__link">Пункт меню 1</a>
<ul class="topmenu__sublist">
<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 1</a></li>
<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 2</a></li>
<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 3</a></li>
<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 4</a></li>
<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 5</a></li>
</ul>
</li>
<li class="topmenu__item active">
<a href="" class="topmenu__link">Пункт меню 2</a>
<ul class="topmenu__sublist">
<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 1</a></li>
<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 2</a></li>
<li class="topmenu__subitem active"><a href="" class="topmenu__sublink">Пункт меню второго уровня 3</a></li>
<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 4</a></li>
<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 5</a></li>
</ul>
</li>
<li class="topmenu__item">
<a href="" class="topmenu__link">Пункт меню 3</a>
<ul class="topmenu__sublist">
<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 1</a></li>
<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 2</a></li>
<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 3</a></li>
<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 4</a></li>
<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 5</a></li>
</ul>
</li>
<li class="topmenu__item">
<a href="" class="topmenu__link">Пункт меню 4</a>
<ul class="topmenu__sublist">
<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 1</a></li>
<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 2</a></li>
<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 3</a></li>
<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 4</a></li>
<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 5</a></li>
</ul>
</li>
<li class="topmenu__item">
<a href="" class="topmenu__link">Пункт меню 5</a>
<ul class="topmenu__sublist">
<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 1</a></li>
<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 2</a></li>
<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 3</a></li>
<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 4</a></li>
<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 5</a></li>
</ul>
</li>
</ul>
</nav>
<div class="same-block">
<code>
Emmet: nav.b-topnav>button.b-menu-toggle>span.menu-toggle__line^+ul.b-topmenu__list.js-topmenu__list>li.topmenu__item*5>a.topmenu__link*4{Пункт меню $}+ul.topmenu__sublist>li.topmenu__subitem*5>a.topmenu__sublink*4{Пункт меню второго уровня $}
</code>
</div>
<style>
*{
margin:0;
padding: 0;
line-height: 1;
}
li {
list-style-type: none;
}
html{
font-size: 16px;
font-family: Arial, sans-serif;
}
.same-block{
background-color: lightblue;
height: 500px;
padding: 3em;
}
/* NAVBAR */
.b-menu-toggle {
width: 34px;
height: 34px;
margin: 3px;
background: none;
border: solid 1px #666;
padding: 4px;
border-radius: 3px;
cursor: pointer;
outline: none;
}
.menu-toggle__line:after,
.menu-toggle__line:before {
content: "";
position: absolute;
left: 0;
top: -9px;
}
.menu-toggle__line:after {
top: 9px;
}
.menu-toggle__line {
position: relative;
display: block;
}
.menu-toggle__line,
.menu-toggle__line:after,
.menu-toggle__line:before{
width: 100%;
height: 2px;
background-color: #333;
transition: all 0.3s;
backface-visibility: hidden;
border-radius: 2px;
}
.b-menu-toggle.on .menu-toggle__line {
background-color: transparent;
}
.b-menu-toggle.on .menu-toggle__line:before {
transform: rotate(45deg) translate(6px, 7px);
}
.b-menu-toggle.on .menu-toggle__line:after {
transform: rotate(-45deg) translate(6px, -7px);
}
@media (min-width: 240px){
.b-topnav {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: #fff;
z-index: 99999999;
overflow-y: auto;
box-shadow: 0 1px 3px rgba(100,100,100,0.9);
max-height: 400px;
max-height: 90vh;
}
.b-topmenu__list {
margin: 0 0 0.5em 3px;
max-height: 0;
overflow:hidden;
transition: max-height ease-out .3s;
}
.b-topmenu__list.on {
max-height: 1000px;
}
.topmenu__item {
display: block;
padding: 0.5em 0;
}
.topmenu__link {
color: #333;
text-transform: uppercase;
}
/* level 2 */
.topmenu__sublist{
margin: 0.5em 0 0.5em 1em;
}
.topmenu__sublink {
color: #333;
}
.topmenu__item.active .topmenu__link,
.topmenu__link:hover,
.topmenu__subitem.active .topmenu__sublink,
.topmenu__sublink:hover {
color: #007eff;
}
}
@media (min-width: 768px){
.b-menu-toggle {
display: none;
}
.b-topnav {
position: relative;
top: 0;
left: 0;
right: 0;
background-color: #007eff;
z-index: 0;
overflow-y: initial;
box-shadow: none;
max-height: none;
margin-bottom: 20px;
}
.b-topmenu__list {
margin-left: 0;
display: table;
width: 100%;
background-color: #007eff;
overflow: visible;
}
.topmenu__item {
display: table-cell;
padding: 0.5em 0;
text-align: left;
position: relative;
}
.topmenu__link{
padding: 0 1em;
color: #fff;
}
.topmenu__link:hover,
.topmenu__item.active .topmenu__link{
color: #333;
}
/*level 2 */
.topmenu__sublist{
margin:0;
display: none;
background-color: #007eff;
}
.topmenu__item:hover>.topmenu__sublist,
.topmenu__item>.topmenu__sublist:hover {
display: block;
position: absolute;
top:25px;
left:0;
right: 0;
}
.topmenu__subitem {
display: block;
padding: 0.5em 1em;
text-align: left;
}
.topmenu__sublink {
color: #fff;
line-height: 1.3;
}
.topmenu__subitem.active>.topmenu__sublink,
.topmenu__subitem:hover>.topmenu__sublink {
color: #333;
}
}
/* /NAVBAR */
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
/*Мобильное меню*/
$(".js-menu-toggle").on('click', function() {
$(this).toggleClass('on');
$(".js-topmenu__list").toggleClass('on');
return false;
});
</script>
</body>
</html>
.icon-sprite-slot(@icon-size, @x: 0, @y: 0) {
background-position: -(@icon-size * @x) -(@icon-size * @y);
}
var express = require('express')
, routes = require('./routes')
, lessMiddleware = require('less-middleware')
, http = require('http')
, path = require('path');
var app = express();
app.configure(function () {
app.set('port', process.env.PORT || 80);
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(lessMiddleware(__dirname + '/public'));
app.use(express.static(path.join(__dirname, 'public')));
});
app.configure('development', function () {
app.use(express.errorHandler());
});
app.get('/', routes.index);doctype 5
html
head
block meta
title= title
link(rel='stylesheet', href='stylesheets/layout.css')
link(rel='stylesheet', href='stylesheets/css.css')
script(src='javascripts/jquery.js')
script(src='javascripts/ajax.js')
script(src='javascripts/progress.js')
script(src='javascripts/moment.js')
script(src='javascripts/livestamp.js')
body
section
block header
block content
block footerlink(rel='stylesheet', href='stylesheets/layout.css')
link(rel='stylesheet', href='stylesheets/css.css')
<link rel="stylesheet/less" type="text/css" href="styles.less" /><script src="less.js" type="text/javascript"></script>
preventDefault(); не добавляет в адресную строку ничего. Используйте его
$.fn.visible = function() {
return this.css('visibility', 'visible');
};
$.fn.invisible = function() {
return this.css('visibility', 'hidden');
};$('Element').click(function(){
$(this).visible(); or $(this).invisible();
});
