• 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

Obito

0x1337
Joined
Feb 17, 2011
Messages
350
Solutions
8
Reaction score
145
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:
Are there any examples (images, videos) that you can show us?
 

Similar threads

Back
Top