带隐藏子菜单的浮动菜单

时间：2014-04-16 00:43:38

标签： javascript jquery css menu floating

所以我想做的是让我的主菜单浮动但同时可调整大小（窗口宽度）我还有一个隐藏的子菜单，我希望它遵循主菜单的规则。

此外，主菜单不会从页面顶部开始，但是当您向下滚动时我希望它粘在顶部边缘并停留在那里。

jsFiddle Here

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（什么版本的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（固定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>
<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>

1 个答案:

答案 0 :(得分：1)

看看这个：

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

基本上，当您向下滚动页面时，它会检测视口顶部何时触及菜单顶部，然后将一个固定类添加到菜单中。这具有将菜单对接到屏幕顶部的效果。这样做虽然意味着将子菜单移动到主菜单中，因此在向下滚动页面后它仍然打开。

<强> 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;
}
相关问题
最新问题