4 min
Mmenu CSS formatting - Menu in right corner

#menu - #css - #jquery

using jQuery.mmenu-plugin

displaying the hamburger icon in the upper right with the home link in the upper left corner of the screen.

using a toledo blade article as an example.

http://testcode.soupmode.com/mmenu/jQuery.mmenu-master/demo/tb/tb7.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="tb7.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: right;
}

.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;
} 

.mm-menu.mm-front {
    box-shadow: none;
/* simple */
border-left: 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;
}

#hamburger {
    padding: 10px 5px 0 0;
    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">
<div id="hamburger">
<div></div>
<div></div>
<div></div>
</div>
</a>
</header>

<nav id="menu"> <!-- id=menu used by mmenu -->
<ul>
<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>

<article id="wrapper">

<section id="topsection">

<h1 id="articletitle"><a href="#">'Last Alarm' rings for fallen heroes</a></h1>

<p id="subtitle">
Thousands pack SeaGate Centre to pay their final respects
</p>

<p>
by <a title="Blade Staff Writer Taylor Dungjen" href="http://www.toledoblade.com/taylordungjen">Taylor Dungjen</a> - Blade Staff Writer
</p>

</section>

<section id="middlesection">

<div class="caption">
<img src="http://www.toledoblade.com/image/2014/01/30/800x_b1_cCM_z/31n6chief.jpg">
<br />
Toledo Fire Chief Luis Santiago salutes the casket of James Dickman as Private Dickman.s wife, Jamie, right, holds their daughter Paige.
</div>

<p>There was one rookie who impressed veteran firefighter Stephen Machcinski.</p>

<p>
more content here
</p>

</section>
</article>

<section class="bigquote">
<em>"We fight with courage, we stand with pride, we honor those who gave their lives."</em>
</section>

<article>
<section id="middlesection">

<p>Sally Glombowski, battalion chief of training, spoke about Private Dickman, with whom she said she bonded. &ldquo;His personality was irresistible,&rdquo; she said.</p>

<p>
more content here
</p>

<div style="border: 1px solid #000;">
<blockquote>
<p>&ldquo;Fire dispatch to Engine 3. Toledo fire dispatch to Engine 3. Clear the air.&rdquo;</p>

<p>&ldquo;Toledo fire dispatch to Stephen A. Machcinski and James A. Dickman on all-call.</p>

<p>&ldquo;On Jan. 26, 2014, at 1447 hours, Stephen A. Machcinski and James A. Dickman answered their last call for service.</p>

<p>&ldquo;May God rest their souls. We&rsquo;ll take it from here, brothers.&rdquo;</p>
</blockquote>
</div>

<p>In a wave, the hundreds of firefighters stood at attention, saluting as the caskets carrying Private Dickman and Private Machcinski were escorted to waiting hearses parked just outside.</p>

<div class="caption">
<img src="http://www.toledoblade.com/image/2014/01/30/800x_b1_cCM_z/n6salute.jpg">
<br />
A sea of firefighters salutes. Firefighters from across the nation traveled to the city to honor Privates Dickman and Machcinski, killed on duty Sunday.
</div>

<p>Slowly, carefully, their brothers and sisters in blue, once more, carried the fallen.</p>

<p>Together.</p>


<div class="caption">
<center>
<img width="75%" height="75%" src="http://www.toledoblade.com/image/2014/01/31/800x_b1_cCM_z/Firemen-1-31.jpg">
<br />
Stephen Machcinski and James Dickman.
</center>
</div>

</section> <!-- close id=middlesection -->

<section id="bottomsection">
<p>
Contact Taylor Dungjen at:<a href="mailto:tdungjen@theblade.com"> tdungjen@theblade.com</a>, 419-724-6054, or on Twitter @taylordungjen.
</p>

<p>
Published: Friday, 1/31/2014 
</p>

</section>

</article>

<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: "right",
            zposition: "front"
        });
    });
</script>

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

</body>
</html>
From JR's : articles
869 words - 7983 chars - 4 min read
created on Feb 04, 2014 at 12:26:42 pm
updated on Feb 04, 2014 at 12:31:37 pm - #
source - versions