Мне нужно сделать горизонтальное меню с движущимися изображениями в CSS3 и HTML

Question

Мне нужно сделать горизонтальное меню с движущимися изображениями в CSS3 и HTML

0

У меня большая проблема, это все мой код с сайта до сих пор. Мне нужно сделать горизонтальную панель меню навигации, которая была привязана к вершине моего сайта с иконками по всему периметру, которые имеют переход, лежащий под ним, содержащий link (кнопка меню).

Переходный вид работает, но он не выталкивает следующий img, позволяя отображать текст вместе с соответствующим значком.

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>

Anton Bahrencheer 25 окт. 2013, в 19:10

Источник

0

Таким образом, изображение над ссылкой должно сдвинуться влево вместе с отображением текста ссылки, верно? более или менее как в этой скрипке? [ссылка] jsfiddle.net/U5e39
sissy 25 окт. 2013, в 17:28
0

Спасибо большое, что спас мой день :)
Anton Bahrencheer 25 окт. 2013, в 18:27
0

пожалуйста! :) Я поставлю это как ответ, потому что я не был уверен, что вы имели в виду, так что вы можете проголосовать;)
sissy 25 окт. 2013, в 20:13

Показать ещё 1 комментарий

Теги:

html

html5

css3

css-transitions

1 ответ

Ещё вопросы

Таким образом, изображение над ссылкой должно сдвинуться влево вместе с отображением текста ссылки, верно? более или менее как в этой скрипке? [ссылка] jsfiddle.net/U5e39
Спасибо большое, что спас мой день :)
пожалуйста! :) Я поставлю это как ответ, потому что я не был уверен, что вы имели в виду, так что вы можете проголосовать;)

sissy · Accepted Answer · 2013-10-25T18-46-00.000Z

Вот рабочий пример 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;
}