• There is NO official Otland's Discord server and NO official Otland's server list. The Otland's Staff does not manage any Discord server or server list. Moderators or administrator of any Discord server or server lists have NO connection to the Otland's Staff. Do not get scammed!

JavaScript / CSS - Menu System

Shalaby

Time has made me wiser, but no more patient.
Joined
Feb 17, 2011
Messages
213
Solutions
5
Reaction score
61
Location
Egypt
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.
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>&equiv;</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:

Rombadr

Premium User
Premium User
Joined
Jan 19, 2020
Messages
322
Solutions
37
Reaction score
207
Are there any examples (images, videos) that you can show us?
 

Boy67

Advanced OT User
Joined
Jul 4, 2007
Messages
391
Solutions
19
Reaction score
233
Location
England
All the javascript can probably be rewritten as CSS, which will increase performance considerably.
 
Top