悬停时打开的基于Glyphicon的导航栏的CSS定位 [英] CSS Positioning for Glyphicon-based Navbar that Opens on Hover

问题描述

我试图将图像模型转换为HTML / CSS，并且我努力让navbar工作：

JSFiddle代码：

I'm trying to convert a image mockup into HTML/CSS and I'm struggling to get the navbar working:

JSFiddle code:

http://jsfiddle.net/victorhooi/ZcrCc/

Full-screen JSFiddle output:

http://jsfiddle.net/victorhooi/ZcrCc/embedded/result/

This is the mockup of the navbar:

The idea is that normally it will only have the hamburger icon and the "Menu" text, and then when you hover, it should open downwards and display the glyphicons and text.

I'm not sure how to integrate the glyphicons into the existing <li> elements (Should I just use a <br> to split the lines?) - and then using CSS positioning so that it opens up and closes.

#nav > a
{
    display: none;
}
#nav li
{
    position: relative;
}

/* first level */

#nav > ul
{
    height: 3.75em;
}
    #nav > ul > li
    {
        width: 25%;
        height: 100%;
        float: left;
    }

解决方案

This should get you closer. I'd make your glyph icons block elements. If you want a nice animation either use CSS3 or jQuery.

html

<ul>
    <li>
        <ul>
            <li><a href="#biography"><img src="http://placehold.it/50x50"/>Bio</a>
            </li>
            <li><a href="#story"><img src="http://placehold.it/50x50"/>Story</a>
            </li>
            <li><a href="#proposal"><img src="http://placehold.it/50x50"/>Proposal</a>
            </li>
            <li><a href="#gallery"><img src="http://placehold.it/50x50"/>Gallery</a>
            </li>
            <li><a href="#rsvp"><img src="http://placehold.it/50x50"/>RSVP</a>
            </li>
            <li><a href="#thedate"><img src="http://placehold.it/50x50"/>The Date</a>
            </li>
            <li><a href="#party"><img src="http://placehold.it/50x50"/>Party</a>
            </li>
            <li><a href="#thankyou"><img src="http://placehold.it/50x50"/>Thank You</a>
            </li>
        </ul> <a href="/">Menu</a>

    </li>
</ul>

css

#nav > a {
    display:none;
}
#nav ul {
    list-style:none;
    margin:0;
    padding:0;
}
#nav li {
    position: relative;
}
/* first level */
#nav > ul > li {
    float: left;
}
/* second level */
#nav li ul {
    display: none;
}
#nav li:hover ul {
    display: block;
}
#nav li ul img {
    display:block;
    min-width:100%;
}
#nav li ul li {
    text-align:center;
}

http://jsfiddle.net/Wz5wn/

这篇关于悬停时打开的基于Glyphicon的导航栏的CSS定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！