0

私は大きな問題を抱えています.これはこれまでのサイトのすべてのコードです..サイトの上部にスナップされる水平ナビゲーションメニューバーを作成する必要があります。リンク (メニュー ボタン)。

トランジションは機能しますが、次の画像を押しのけず、適切なアイコンとともにテキストを表示できます。

CSS:

*                   { padding: 0px; margin: 0px; border: 0px; }


html, body              { width: 100%;
                    height: 100%;
}


body                    { display: inline-block;
}


wrapper             { width: 100%;                          
                    background-color: #0F0;
                    margin-top: 40px;                       
}


#topsnap_nav                { width: 100%;
                    height: 40px;
                    background-color: #000;
                    position: fixed;
                    top: 0px;
}


ul                  { float: right;
}


ul li                   { list-style-type: none;
}


li                  { display: inline-block;
                    background-color: #CF0;
                    position: relative;
                    float:right;
}


li a                    { width: 0px;
                    background:red;
                    transition:width 2s;
                    -webkit-transition:width 2s; /* Safari */
                    display: block;
                    float: left;
                    position: absolute;
                    bottom: 0px;
                    right: 0px;
                    margin-right: 40px;
                    overflow: hidden;
                    height: 40px;
}



li:hover a              { width: 400px;
}


li img                  { float: right;
                    display: block;
}

HTML: 

<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <link rel="stylesheet" type="text/css" href="css/styles_main.css">
    <link rel="stylesheet" type="text/css" href="css/styles_fonts.css">
    <link rel="stylesheet" type="text/css" href="css/styles_nav.css">
</head> 


<body> 

<div id="topsnap_nav">

        <nav>

        <ul>
            <li>
                <img src="images/work_images/Untitled-1.png" width="40">
                <a href="#">hi</a> 
            </li>
            <li>
                <img src="images/work_images/Untitled-1.png" width="40">
                <a href="#">hello</a> 
            </li>
        </ul>

        </nav>

</div>


    <div id="wrapper"> 

        hi hi hi...

    </div> 

</body>

4

1 に答える 1

1

これが実際の例ですhttp://jsfiddle.net/U5e39e

リスト要素にトランジションを配置し、z-index を操作します

li { display: block;    
position: relative;
float:right;
transition:width 2s;
-webkit-transition:width 2s; /* Safari */
height: 40px;
width: 40px;
background-color: #CF0;
}


li a { width: 0px;
    background:red;
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    border: 1px solid blue;
    overflow: hidden;
    height: 40px;
    width: 30px;
    color: blue;
    z-index: 0;
    margin-left: 40px;
}

li:hover { width: 400px;
}

li:hover img{ float:left}


li img { float: left;
    position: relative;
    z-index: 1;
    background-color: yellow;
}
于 2013-10-25T20:17:14.937 に答える