Mmenu CSS formatting - Menu in right corner
code=yes
#menu - #css
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>