Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    May 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question JavaScript / CSS - Menu System

    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.

    http://www.jordanm.co.uk/lab/topdrawer

    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-1.9.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.mobile-1.3.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>


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

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,762
    Thanks
    23
    Thanked 548 Times in 547 Posts
    Look into Bootstrap. Might help.

  • #3
    New to the CF scene
    Join Date
    May 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    sorry could you elaborate? javascript bootstrap?

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,184
    Thanks
    10
    Thanked 569 Times in 550 Posts
    you can actually do that in all recent browsers with just CSS.
    it won't work in IE6 and IE7 will not show all the fancyness, and IE8 won't show animation, but it should WORK in all browsers.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/1/19) IE7:0.2, IE8:6.7, IE11:7.4, IE9:3.8, IE10:4.4, FF:18.3, CH:43.6, SF:7.8, MOBILE:27.5

  • #5
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,762
    Thanks
    23
    Thanked 548 Times in 547 Posts
    Evolution - The non-random survival of random variants.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •