Does anyone know of a similar menu system to this which works well across most browsers and mobile browsers? I have it working but It doesn't work well on IE and is choppy on Firefox.
~EDIT~
Sorry, I didn't realize I couldn't ask for something similar to the work I have seen elsewhere.
The reason I didn't post the code as it is rather long and also I don't necessarily need to go this route if someone has seen a similar menu system completed in a different way that works better.
Here is my code that I've tried so far.
Here is my CSS
~EDIT~
Sorry, I didn't realize I couldn't ask for something similar to the work I have seen elsewhere.
The reason I didn't post the code as it is rather long and also I don't necessarily need to go this route if someone has seen a similar menu system completed in a different way that works better.
Here is my code that I've tried so far.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Website Name</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="Content-Style-Type" content="text/css"/>
<meta name="description" content="">
<meta name="author" content="">
<script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.5.0.min.js"></script>
<script type="text/javascript" src="js/modernizr-dev-large.js"></script>
<script type="text/javascript" src="js/fastclick.js"></script>
<link href="css/main.css" rel="stylesheet" type="text/css"/>
<meta http-equiv="cleartype" content="on">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-dns-prefetch-control" content="off"/>
<script type="text/javascript">
window.addEventListener('load', function () {
new FastClick(document.body);
}, false);
$('.menu').click(function (e) {
$('.drawer').toggleClass('active');
e.preventDefault();
});
</script>
</head>
<body>
<header>
<div class="top">
<div class="heading">
<div class="experiment-number">
<span>Experiment</span>
N<sup>o</sup> 5
</div>
<h1>Top Drawer</h1>
</div>
<a href="#" class="menu"><span>≡</span> Menu</a>
</div>
</header>
<div class="drawer">
<nav>
<ul class="nav nav-tabs nav-stacked">
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
</ul>
</nav>
<div class="container" class="cf">
<section>
para1
</section>
<section>
para 2
</section>
</div>
<footer>
<p> footer </p>
</footer>
</div>
</body>
</html>
</body>
</html>
Here is my CSS
CSS:
/* Experiment Specific Styles */
.top {
background: #212121;
color: #fff;
position: absolute;
left: 0;
top: 0;
right: 0;
z-index: 2;
overflow: hidden;
}
.drawer {
-webkit-transform: translate3d(0, -141px, 0);
-moz-transform: translate3d(0, -141px, 0);
-o-transform: translate3d(0, -141px, 0);
transform: translate3d(0, -141px, 0);
-webkit-transition:-webkit-transform 0.25s linear;
-moz-transition:-moz-transform 0.25s linear;
-o-transition:-o-transform 0.25s linear;
transition:transform 0.25s linear;
}
.drawer.active {
-webkit-transform: translate3d(0,129px,0);
-moz-transform: translate3d(0,129px,0);
-o-transform: translate3d(0,129px,0);
transform: translate3d(0,129px,0);
}
a.menu {
position: absolute;
z-index: 3;
border:1px solid white;
text-decoration: none;
top: 1.6em;
right: 1.6em;
color: #fff;
text-transform: uppercase;
font-size: 0.65em;
padding: 0.4em 0.7em;
border-radius: 4px;
}
a.menu span {
font-size:1.6em;
vertical-align: -0.15em;
}
nav ul {
list-style:none;
}
nav ul li a {
display: block;
text-decoration: none;
background: rgba(0,0,0,0.3);
color: white;
padding: 1em;
margin-bottom: 1px;
}
/* Fallbacks */
.no-csstransforms .top {
position: static;
}
.no-csstransforms .drawer nav {
display: none;
}
.no-csstransforms .drawer.active nav {
display: block;
}
@media all and (min-width: 30em) {
.experiment-number {
float: left;
margin-right: 0.9em;
border-right: 1px solid;
padding-right: 1em;
padding-left: 0.9em;
padding-bottom: 0.6em;
margin-bottom: 0;
}
.drawer {
-webkit-transform: translate3d(0, -197px, 0);
-moz-transform: translate3d(0, -197px, 0);
-o-transform: translate3d(0, -197px, 0);
transform: translate3d(0, -197px, 0);
}
.drawer.active {
-webkit-transform:translate3d(0,87px,0);
-moz-transform:translate3d(0,87px,0);
-o-transform:translate3d(0,87px,0);
transform:translate3d(0,87px,0);
}
h1 {
text-align: left;
}
.container {
padding: 2.6em;
}
}
/* ============================================================================== */
/*font-family:'Avenir Next LT W01 Bold';
font-family:'AvenirNextLTW01-Medium';
font-family:'AvenirNextLTW01-Regular';
font-family:'Futura W01 Bold';*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin:0;
padding:0;
border:0;
font-size:100%;
font:inherit;
vertical-align:baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; }
body { line-height:1; }
ol, ul { list-style:none; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after, q:before, q:after {
content:'';
content:none;
}
table {
border-collapse:collapse;
border-spacing:0;
}
body {
font-size:1em;
line-height:1.5;
background: #F1492F;
color: #fff;
font-family: 'Open Sans',"Helvetica Neue", Arial, sans-serif;
margin: 0;
padding: 0;
}
#bd-style-guide { padding:2.618em; }
#bd-style-guide .container {
margin:0 auto;
width:45em;
}
h1, h2, h3, h4, h5, h6, hgroup, ul, ol, dd, p, figure, pre, table, fieldset, hr, blockquote, legend, section, .experiment-number {
margin-bottom:21px;
margin-bottom:1.5rem;
}
a {
color: #fff;
}
sup {
top: -0.5em;
}
sub, sup {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline;
}
h1 {
margin-bottom: 0;
text-transform: uppercase;
letter-spacing:1px;
font-size:2em;
font-weight: 800;
}
h2 {
text-transform: uppercase;
letter-spacing:1px;
font-size:1em;
margin-bottom:10px;
font-weight: 700;
margin-bottom:0.75rem;
}
p, li {
font-size:0.85em;
}
ul {
list-style:disc;
}
.experiment-number {
font-size:1.7em;
line-height: 0.7em;
margin-bottom: 4px;
margin-bottom: 0.25rem;
}
.experiment-number span {
text-transform: uppercase;
display: block;
font-size: 0.33em;
}
.heading {
border-bottom: 2px solid;
margin: 1em;
padding-bottom: 0.3em;
}
section {
border-bottom: 1px solid;
}
section:last-of-type {
border: none;
}
.container {
padding: 1em;
}
pre {
font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
font-size: 0.9em;
background: #F1F1F1;
color: #212121;
padding: 16px;
padding: 1rem;
line-height: 1.3em;
word-break: break-all;
word-wrap: break-word;
white-space: pre;
white-space: pre-wrap;
}
footer {
border-top: 2px solid;
margin: 1em;
}
footer p {
padding-top: 16px;
padding-top: 1rem;
font-size: 0.75em;
text-transform: uppercase;
}
/* Experiment Specific Styles */
@media all and (min-width: 33.236em) {
.experiment-number {
float: left;
margin-right: 0.9em;
border-right: 1px solid;
padding-right: 1em;
padding-left: 0.9em;
padding-bottom: 0.6em;
margin-bottom: 0;
text-align: center;
}
.container {
padding: 2.6em;
}
}
Last edited: