3 min
Mmenu CSS formatting - Menu in left corner

#menu - #css - #jquery

using jQuery.mmenu-plugin

displaying the hamburger icon in the upper left corner of the screen and nothing else.

using a toledo blade article as an example.

http://testcode.soupmode.com/mmenu/jQuery.mmenu-master/demo/tb/tb7left.html


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=yes" />
<title>TB Test</title>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic|Open+Sans:700,400" />
<link rel="stylesheet" type="text/css" href="tb7left.css"  />
<link type="text/css" rel="stylesheet" href="jquery.mmenu.css" />
<!--[if lt IE 9]>
<link type="text/css" rel="stylesheet" href="jquery.mmenu.ie8.css" />
<![endif]-->
<link type="text/css" rel="stylesheet" href="jquery.mmenu.positioning.css" />

<!--
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.mmenu.js"></script>
-->

<style>
nav {
    display: none;
}

/* Big cover image on the home page */
#site-head {
    position: relative;
    display: table;
    width: 100%;
    /* height: 60%;  see NOTE above to make this work */
    text-align: center;
    color: #fff;
    background: #303538 no-repeat center center;
    background-size: cover;
    padding-top: 2em;  
    padding-bottom: 1em;
}

#blog-author-image {
    width:50px;
    height:50px;
    border-radius: 25px;
    -moz-border-radius: 25px;
    -khtml-border-radius: 25px;
    -webkit-border-radius: 25px;
}

#blog-title {
    font-size: 2em;
    line-height: 1em; 
}

#blog-description {
    font-size: 1em;
    line-height: 1.5em; 
}

header #homelink a, header #homelink {
    color: #888888;
    text-decoration: none;
    font-weight: bold;
}

#homelink a:hover, header a:hover {
    color: #000000;
    text-decoration: none;
}


/* mmenu start */
header {
    display: block;
    float: left;
    width: 100%;
    left: auto;
/*    position: fixed; */
}

header a
{
    display: block;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 0;
    left: 10px;
}

header a.right
{
    left: auto;
    right: 10px;
}

header {
    height: 30px;
}

header a {
    display: none;
    display: inherit;
    background: none;
    width: 0;
    height: 0;
    top: 0;
    left: 0;
    padding: 0 20px 0 0;
    margin: 0;
    line-height: 1em;
}

#homelink {
    font-size: 80%;
    color: #ccc;
    padding: 5px 5px 0 5px;
}

.mm-menu {
    background: #666;
/* simple */
background: #fff; 
} 

.mm-list {
    font-size: 1em;
    color: #ccc;
/* simple */
color: #888;
    text-align: left;
}

.mm-list > li { 
}

.mm-list a:hover {
    background: #777; 
/* simple */
background: #fff;
/* simple */
color: #000;
text-decoration: underline;
}

.mm-list > li:not(.mm-subtitle):not(.mm-label):not(.mm-noresults)::after {
    border: none;
}

#mm-blocker {
    background: #000;
}

.mm-menu.mm-right {
    width: 140px;
} 

/* for controlling the menu when positioned at the left */
.mm-menu {
  width: 140px;
}

.mm-menu.mm-front {
    box-shadow: none;
/* simple */
border-right: 1px solid #000; 
}

html.mm-right.mm-opened.mm-opening .mm-page,
html.mm-right.mm-opened.mm-opening #mm-blocker,
html.mm-right.mm-opened.mm-opening .mm-fixed-top,
html.mm-right.mm-opened.mm-opening .mm-fixed-bottom {
    right: 140px;
}

html.mm-opened.mm-opening .mm-page,
html.mm-opened.mm-opening #mm-blocker,
html.mm-opened.mm-opening .mm-fixed-top,
html.mm-opened.mm-opening .mm-fixed-bottom {
  left: 140px; 
}


#hamburger {
/*     padding: 10px 5px 0 0; */
    padding: 10px 0 0 5px;
    width: 20px;
}

#hamburger div {
    background-color: #ccc;
/* simple */
/* background-color: #888; */
    height: 2px;
    width: 90%;
    margin-bottom: 2px; 
}

/* mmenu end */

@media only screen and (max-width: 56em) { 
    header {
        background-color: #ffffff;
/*        position: fixed; */
        border-bottom: 1px solid #888888;
    }
    #wrapper {
        padding-top: 30px;
    }
}

</style>

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

</head>
<body>

<div id="page"> <!-- used by mmenu -->

<header>
<!-- <a title="Home Page" href="http://toledoblade.com"><div id="homelink">TheBlade</div></a> -->
<!-- <a class="right" title="menu" href="#menu"> -->
<a class="left" title="menu" href="#menu">
<div id="hamburger">
<div></div>
<div></div>
<div></div>
</div>
</a>
</header>

<nav id="menu"> <!-- id=menu used by mmenu -->
<ul>
<li><a title="Home Page"              href="http://www.toledoblade.com/">Blade Home</a></li>
<li><a title="Search"                 href="http://www.toledoblade.com/search/">Search</a></li>
<li><a title="News"                   href="http://www.toledoblade.com/news/">News</a></li>
<li><a title="Sports"                 href="http://www.toledoblade.com/sports/">Sports</a></li>
<li><a title="Arts and Entertainment" href="http://www.toledoblade.com/a-e/">A & E</a></li>
<li><a title="Business"               href="http://www.toledoblade.com/business/">Business</a></li>
<li><a title="Opinion"                href="http://www.toledoblade.com/opinion/">Opinion</a></li>
</ul>
</nav>






content markup here

<footer>
<div id="footermenu">
<ul>
<li><a title="About"     href="#">About</a></li> 
<li><a title="Help"      href="#">Help</a></li> 
<li><a title="Contact"   href="#">Contact</a></li> 
<li><a title="Archives"  href="#">Archives</a></li> 
<li><a title="Search"    href="#">Search</a></li> 
</ul>
</div>
<p>
current date: Feb 2, 2014 - 3:47 p.m. EST
</p>
</footer> <!-- close id=footermenu -->

<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script type="text/javascript" src="jquery.mmenu.js"></script>
<script type="text/javascript">
    $(function() {
        $('nav#menu').mmenu({
            position: "left",
            zposition: "front"
        });
    });
</script>

</div> <!-- end id=page used by mmenu -->

</body>
</html>
From JR's : articles
600 words - 5881 chars - 3 min read
created on Feb 04, 2014 at 12:29:51 pm
updated on Feb 04, 2014 at 12:31:13 pm - #
source - versions