javascript - multinivel - Menú flotante con submenú oculto

menu vertical responsive

Question

Entonces, lo que quiero hacer es tener mi menú principal para flotar pero, al mismo tiempo, cambiar el tamaño (ancho de la ventana). También tengo un submenú oculto y quiero que siga las reglas del menú principal.

Además, el menú principal no comienza en la parte superior de la página, pero a medida que se desplaza hacia abajo, quiero que se adhiera al borde superior y descanse allí.

jsFiddle aquí

CSS

#menutop {
    color: #FFF;
    display: block;
    padding-top: 5px;
    text-transform: none;
    text-align: center;
    font-size: 20px;
    word-spacing: 1em;
    font-weight: normal;
    height: 65px;
    font-family: ''airship_27regular'', sans-serif;
    letter-spacing: 0.05em;
    position: relative;
    z-index: 9000;
}

.dropdownwrap {
    height: 150px;
    background-color: rgb(245, 245, 245);
    display: none;
    padding: 20px;
    width: auto;
    margin-top: 0px;
    margin-right: auto;
    margin-left: auto;
}

#dropdown {
    text-transform: none;
    text-align: center;
    font-size: 20px;
    letter-spacing: 0.05em;
    color: rgb(102, 102, 102);
    position: relative;
    z-index: 99999;
    text-decoration: none;
}

#dropdown:hover {
    text-decoration: none;
    color: #FFFFFF;
}

#CenterMenu {
    display: block;
    height: 100px;
    width: 700px;
    margin-top: 20px;
    margin-bottom: 0px;
    position: relative;
    z-index: 999999;
    float: none;
    margin-left: auto;
    margin-right: auto;
}

.insideMenu {
    display: block;
    float: right;
    height: 88px;
    width: 130px;
    margin-top: 12px;
}

.insideMenu h1 {
    font-family: ''airship_27regular'', sans-serif;
    font-size: 14px;
    line-height: 14px;
    font-weight: lighter;
    word-spacing: 12px;
    letter-spacing: 0.1em;
    color: rgb(0, 0, 0);
    text-align: left;
}

.insideMenu p {
    font-size: 10px;
    line-height: 18px;
    font-weight: 400;
    word-spacing: 1.5px;
    letter-spacing: 0.1em;
    color: rgb(0, 102, 102);
    text-align: left;
}

JAVASCRIPT (¿Qué versión de jQuery?)

$(document).ready(function (e) {

    $(''#dropdown'').on(''click'', function () {

        $(''.dropdownwrap'').slideToggle();

    });

});

function MM_preloadImages() { //v3.0
    var d = document;
    if (d.images) {
        if (!d.MM_p) d.MM_p = new Array();
        var i, j = d.MM_p.length, a = MM_preloadImages.arguments;
        for (i = 0; i < a.length; i++)
            if (a[i].indexOf("#") != 0) {
                d.MM_p[j] = new Image;
                d.MM_p[j++].src = a[i];
            }
    }
}

function MM_swapImgRestore() { //v3.0
    var i, x, a = document.MM_sr;
    for (i = 0; a && i < a.length && (x = a[i]) && x.oSrc; i++) x.src = x.oSrc;
}

function MM_findObj(n, d) { //v4.01
    var p, i, x;
    if (!d) d = document;
    if ((p = n.indexOf("?")) > 0 && parent.frames.length) {
        d = parent.frames[n.substring(p + 1)].document;
        n = n.substring(0, p);
    }
    if (!(x = d[n]) && d.all) x = d.all[n];
    for (i = 0; !x && i < d.forms.length; i++) x = d.forms[i][n];
    for (i = 0; !x && d.layers && i < d.layers.length; i++) x = MM_findObj(n, d.layers[i].document);
    if (!x && d.getElementById) x = d.getElementById(n);
    return x;
}

function MM_swapImage() { //v3.0
    var i, j = 0, x, a = MM_swapImage.arguments;
    document.MM_sr = new Array;
    for (i = 0; i < (a.length - 2); i += 3)
        if ((x = MM_findObj(a[i])) != null) {
            document.MM_sr[j++] = x;
            if (!x.oSrc) x.oSrc = x.src;
            x.src = a[i + 2];
        }
}

function getRandomColor() {
    var letters = ''0123456789ABCDEF''.split('''');
    var color = ''#'';
    for (var i = 0; i < 6; i++) {
        color += letters[Math.round(Math.random() * 15)];
    }
    return color;
}

HTML (formato HTML fijo, etiqueta adicional eliminada, etiqueta faltante)

<div id="menutop">
    <p>
        <a href="index.html"> ABOUT</a>
        <a href="#" id="dropdown" name="dropdown" title="Click This Button"> WORK</a>
        <a href="contact.html"> CONTACT</a>
    </p>
</div>
<div class="dropdownwrap">
    <div id="CenterMenu">
        <div class="insideMenu">
            <h1>BRANDING</h1>
            <p>
                <a href="JessWork.html">X20</a>
                <br />
                <a href="">FAUNE DU QC.</a>
                <br />
                <a href="">TIANGLE</a>
                <br />
                <a href="">NAT GEO</a>
            </p>
        </div>
        <div class="insideMenu">
            <h1>MULTIMEDIA</h1>
            <p>
                <a href="">SMOKED MEAT</a>
                <br />
                <a href="">CITYSCAPES</a>
                <br />
                <a href="">M. MASON</a>
            </p>
        </div>
        <div class="insideMenu">
            <h1>ILLUSTRATION</h1>
            <p>
                <a href="">TUNAS & <br />TRUMPETS</a>
                <br />
                <a href="">PUNCTUATION PAMPHLETS</a>
            </p>
        </div>
        <div class="insideMenu">
            <h1>PACKAGING</h1>
            <p>
                <a href="">SPICE OF LIFE</a>
                <br />
                <a href="">PERSONAL<br />PRESS KIT</a>
            </p>
        </div>
        <div class="insideMenu">
            <h1>PUBLICATION</h1>
            <p>
                <a href="">JOHN CAGE</a>
                <br />
                <a href="">LEAD</a>
                <br />
                <a href="">SOCIAL ISSUE</a>
                <br />
                <a href="">CALL FESTIVAL</a>
            </p>
        </div>
    </div>
</div>

Answer 1

Echa un vistazo a esto:

http://jsfiddle.net/j62FT/4/

Básicamente, al desplazarse hacia abajo en la página, detecta cuándo la parte superior de la ventana gráfica aparece en la parte superior del menú y luego agrega una clase de elementos fijos al menú. Esto tiene el efecto de acoplar el menú a la parte superior de la pantalla. Sin embargo, hacer esto significaba mover su submenú al menú principal para que aún se abriera después de desplazarse por la página.

JS

$(document).ready(function (e) {

    new mainMenu().load();

});

function mainMenu() {

    var thisObj = this,
        menu = $("#menutop"),
        win = $(window),
        pos =  menu.offset().top;

    thisObj.load = function() {

        // Bind slideToggle

        $(''#dropdown'').on(''click'', function () {

            $(''.dropdownwrap'').slideToggle();

        });

        // Set Fixed

        win.on("scroll", function() {    

            if( win.scrollTop() > pos) {
                menu.addClass("fixed");
            } else {
                menu.removeClass("fixed");
            }            
        });        
    }    
}

HTML

<div id="menutop">
    <p>
        <a href="index.html"> ABOUT</a>
        <a href="#" id="dropdown" name="dropdown" title="Click This Button"> WORK</a>
        <a href="contact.html"> CONTACT</a>
    </p>

<div class="dropdownwrap">
    <div id="CenterMenu">
        <div class="insideMenu">
            <h1>BRANDING</h1>
            <p>
                <a href="JessWork.html">X20</a>
                <br />
                <a href="">FAUNE DU QC.</a>
                <br />
                <a href="">TIANGLE</a>
                <br />
                <a href="">NAT GEO</a>
            </p>
        </div>
        <div class="insideMenu">
            <h1>MULTIMEDIA</h1>
            <p>
                <a href="">SMOKED MEAT</a>
                <br />
                <a href="">CITYSCAPES</a>
                <br />
                <a href="">M. MASON</a>
            </p>
        </div>
        <div class="insideMenu">
            <h1>ILLUSTRATION</h1>
            <p>
                <a href="">TUNAS & <br />TRUMPETS</a>
                <br />
                <a href="">PUNCTUATION PAMPHLETS</a>
            </p>
        </div>
        <div class="insideMenu">
            <h1>PACKAGING</h1>
            <p>
                <a href="">SPICE OF LIFE</a>
                <br />
                <a href="">PERSONAL<br />PRESS KIT</a>
            </p>
        </div>
        <div class="insideMenu">
            <h1>PUBLICATION</h1>
            <p>
                <a href="">JOHN CAGE</a>
                <br />
                <a href="">LEAD</a>
                <br />
                <a href="">SOCIAL ISSUE</a>
                <br />
                <a href="">CALL FESTIVAL</a>
            </p>
        </div>
    </div>
</div>

</div>

CSS

body {
    margin: 0;
}

#menutop {
    color: #FFF;
    text-transform: none;
    text-align: center;
    font-size: 20px;
    word-spacing: 1em;
    font-weight: normal;
    font-family: ''airship_27regular'', sans-serif;
    letter-spacing: 0.05em;
    z-index: 9000;
    background: #ccc;
}
#menutop p {
    margin: 0;
    padding: 20px;
}

.fixed {
    position: fixed;
    top: 0;
    width: 100%;
}


.dropdownwrap {
    height: 150px;
    background-color: rgb(245, 245, 245);
    display: none;
    padding: 20px;
    width: auto;
    margin-top: 0px;
    margin-right: auto;
    margin-left: auto;
}

#dropdown {
    text-transform: none;
    text-align: center;
    font-size: 20px;
    letter-spacing: 0.05em;
    color: rgb(102, 102, 102);
    position: relative;
    z-index: 99999;
    text-decoration: none;
}

#dropdown:hover {
    text-decoration: none;
    color: #FFFFFF;
}

#CenterMenu {
    display: block;
    height: 100px;
    width: 700px;
    margin-top: 20px;
    margin-bottom: 0px;
    position: relative;
    z-index: 999999;
    float: none;
    margin-left: auto;
    margin-right: auto;
}

.insideMenu {
    display: block;
    float: right;
    height: 88px;
    width: 130px;
    margin-top: 12px;
}

.insideMenu h1 {
    font-family: ''airship_27regular'', sans-serif;
    font-size: 14px;
    line-height: 14px;
    font-weight: lighter;
    word-spacing: 12px;
    letter-spacing: 0.1em;
    color: rgb(0, 0, 0);
    text-align: left;
}

.insideMenu p {
    font-size: 10px;
    line-height: 18px;
    font-weight: 400;
    word-spacing: 1.5px;
    letter-spacing: 0.1em;
    color: rgb(0, 102, 102);
    text-align: left;
}