Skip to content
Permalink
Browse files

version 2

  • Loading branch information...
FrDH committed Jun 3, 2019
1 parent af1c110 commit 4f763d697e3c1cf36cc9956a0cb37343e4f00372
@@ -1,15 +1,12 @@
jQuery.mhead
mhead.js
================

A small framework for creating a beautiful mobile navigation header to accompany the jQuery.mmenu navigation menu on your website and webapp.
A small framework for creating a beautiful mobile navigation header to accompany the mmenu.js navigation menu on your website and webapp.

Need help? Have a look at [the documentation](https://mmenujs.com/mhead-plugin/) for demos and documentation.

### Licence
The jQuery.mhead plugin is licensed under the [CC-BY-4.0 license](http://creativecommons.org/licenses/by/4.0/).

### Dependencies
+ jQuery 1.7 or higher
The mhead javascript plugin is licensed under the [CC-BY-4.0 license](http://creativecommons.org/licenses/by/4.0/).

### Development
This project uses [Gulp](http://gulpjs.com/) to transpile, minify and concatenate the TS/JS and SCSS/CSS files.

This file was deleted.

@@ -1,8 +1,8 @@
{
"name" : "jQuery.mhead",
"version" : "1.0.2",
"name" : "mhead-js",
"version" : "2.0.0",
"authors" : "Fred Heusschen <info@frebsite.nl>",
"description" : "A small framework for creating a beautiful mobile navigation header to accompany the jQuery.mmenu menu on your website and webapp.",
"description" : "A small framework for creating a beautiful mobile navigation header to accompany the mmenu.js menu on your website and webapp.",
"keywords" : [
"app",
"mobile",
@@ -12,4 +12,4 @@
"navbar"
],
"license": "CC-BY-4.0"
}
}

This file was deleted.

@@ -1,10 +1,8 @@
html, body
{
html, body {
padding: 0;
margin: 0;
}
body
{
body {
background-color: #fff;
font-family: Arial, Helvetica, Verdana;
font-size: 14px;
@@ -13,45 +11,86 @@ body
position: relative;
-webkit-text-size-adjust: none;
}
body *
{
body * {
text-shadow: none;
}
h1, h2, h3, h4, h5, h6
{
line-height: 1;
h1, h2, h3, h4, h5, h6 {
line-height: 1.25;
font-weight: bold;
margin: 20px 0 10px 0;
}
h1, h2, h3
{
h1, h2, h3 {
font-size: 18px;
}
h4, h5, h6
{
h4, h5, h6 {
font-size: 16px;
}
p
{
p {
margin: 0 0 10px 0;
}
a, a:link, a:active, a:visited, a:hover
{
a, a:link, a:active, a:visited, a:hover {
color: inherit;
text-decoration: underline;
}

nav:not(.mm-menu)
{
nav:not(.mm-menu) {
display: none;
}

#page
{
.header {
position: relative;
display: block;
padding: 10px;
line-height: 24px;
font-size: 16px;
font-weight: bold;
color: #fff;
background: #4bb5ef;
}

.header a {
position: absolute;
top: 50%;
left: 10px;
transform: translate( 0, -50% );
text-decoration: none;
}
.header span {
display: block;
text-align: center;
}
.header input {
display: block;
box-sizing: border-box;
height: 30px;
width: calc(100% - 30px);
padding: 0 10px;
margin: 0 0 0 30px;
border: none;
border-radius: 3px;
font-size: inherit;
}
.header button {
position: absolute;
top: 50%;
right: 20px;
display: block;
box-sizing: border-box;
padding: 0;
margin: 0;
transform: translate( 0, -50% );
border: none;
background: none;
color: #999;
cursor: pointer;
}

#page {
padding-bottom: 100px;
}
.content
{

.content {
box-sizing: border-box;
padding: 30vh 50px;
text-align: center;
padding: 150px 50px 50px 50px;
}
}

This file was deleted.

Large diffs are not rendered by default.

@@ -0,0 +1,75 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="author" content="mmenujs.com" />
<meta content="width=600px user-scalable=yes" name="viewport" />
<meta name="robots" content="noindex, nofollow" />

<title>mhead.js demo</title>

<link rel="stylesheet" type="text/css" href="css/demo.css">
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Pacifico" />
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="../dist/mhead.css">
</head>
<body>

<div id="page">

<div class="header" style="padding-bottom: 0px;">
<span>demo</span>
</div>

<form class="header sticky">
<a class="fa fa-bars" href="#/menu"></a>
<input placeholder="search" />
<button type="submit" class="fa fa-search"></button>
</form>

<div class="content">
<p><strong>This is a demo.</strong><br />
Scroll down to see the header in action.</p>
</div>

<div class="content">
<p><strong>Scroll a bit faster.</strong><br />
If the header did not yet disappear.</p>
</div>

<div class="content">
<p><strong>Now scroll back up.</strong><br />
To make the header appear again.</p>
</div>
</div>

<script src="../dist/mhead.js"></script>
<script>
// Create the sticky header.
new Mhead( '.header.sticky', {
scroll : {
hide: 200
},
// hooks: {
// 'scrolledIn': function () {
// console.log('scrolledIn');
// },
// 'scrolledOut': function () {
// console.log('scrolledOut');
// }
// }
});
// For the demo.
document.addEventListener('click', ( evnt ) => {
if (evnt.target.closest('a[href^="#/"]')) {
evnt.preventDefault();
alert( 'Thank you for clicking, but that\'s a demo link.' );
}
});
</script>

</body>
</html>

0 comments on commit 4f763d6

Please sign in to comment.
You can’t perform that action at this time.