Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Помогите переделать меню на CSS

Автор: Borland_Delphi_6 15.12.2011, 21:28

Добрый вечер. Подскажите, можно ли переделать код этого меню таким образом, чтобы при наведении на курсора на какую-либо секцию и появлении подменю, меню первого уровня не разъезжалось? На примере хорошо видно, о чем идет речь. В оригинале у выпадающего меню было установлено свойство position:absolute, но мне не нравится, что в таком случае выпадающее меню всегда появляется в одном месте, внезависимости от того, на какой пункт основного меню наведен курсор.

Код в аттаче.

Автор: Evghenusi 16.12.2011, 01:36

Код


#navBar1 ul ul {
    display: none;
    position: absolute;
}
#navBar1 ul ul li {
    float: none;
}

подойдёт?

Автор: Borland_Delphi_6 16.12.2011, 16:22

Evghenusi, спасибо, но это не совсем то, чего я пытаюсь добиться. С учетом Ваших поправок получается хорошее вертикальное выпадающее меню, а я пытаюсь сделать горизонтальное. Пытаюсь такого результата добиться:

Автор: $дмитрий 16.12.2011, 17:22

Не понятно, как должно позиционироваться подменю относительно родителя?

Автор: Borland_Delphi_6 16.12.2011, 17:52

$дмитрий, это не очень важно. В идеале, конечно, чтобы середина подменю совпадала с серединой блока родителя. Но сейчас это не так и реализовать такое наверное трудно. Поэтому меня устраивает, как браузер(ы) позиционируют его, исходя из каких-то собственных убеждений, не устраивает только, что блок родителя при этом "раздувает" .

Автор: Evghenusi 16.12.2011, 19:59

Borland_Delphi_6, как вам такое http://48site.ru/wp-content/themes/48site.ru/examples/menu/goriz2urovn/index.htm ?

Автор: Borland_Delphi_6 17.12.2011, 14:24

Evghenusi, я изначально делал по образу и подобию http://webmastermix.ru/lessons-css/84-gorizontalnoe-vypadayushchyee-menyu.html. И меню по Вашей ссылке, и по моей работают одинаково и имеют один и тот же недостаток: вложенные меню открываются где-то вдалеке от родителя. Хотя может на реальной структуре меню это будет и не так ощутимо... В общем, поэкспериментирую еще. В любом случае - спасибо за помощь!

Автор: Evghenusi 17.12.2011, 16:02

Цитата(Borland_Delphi_6 @ 17.12.2011, 14:24

)

И меню по Вашей ссылке, и по моей работают одинаково

, разве?
меню которое я нашёл, как раз второй уровень выводит по середине как вы и хотели.

Цитата(Borland_Delphi_6 @ 16.12.2011, 17:52

)

В идеале, конечно, чтобы середина подменю совпадала с серединой блока родителя.

помните?

2)

Цитата(Borland_Delphi_6 @ 17.12.2011, 14:24

)

и имеют один и тот же недостаток: вложенные меню открываются где-то вдалеке от родителя.

ИМХО подменю появляется там где задумано....поясните тогда как это "вблизи" должно выглядеть.
Учитывая рисунок присланный вами, оба меню подходят под критерий "вблизи".

3) в том меню которое вы прикрепили, если добавить

Код


#navBar1 ul ul {
    position: absolute;
}

то меню работает так же как и то с которого вы брали пример, НО из-за того что оно находится справа, некоторое вложенные меню упираются о правый край страницы и всё что не поместилось переходит на следующую строчку.

Как сделать что бы подменю справа налево "вытягивалось" не знаю(

Автор: Evghenusi 17.12.2011, 16:38

Код


<style type="text/css">
    div {
        float: right;
        text-align: right;
    }
    ul {
        height: 50px;
        position: relative;
        width: 400px;
    }
    ul li {
        display:inline-block;
        width:40px;
        border:1px solid;
        text-align: center;
    }
    ul ul {
        display:none;
        position:absolute;
        right:0;
        text-align: right;
    }
    ul li:hover ul {
        display:block;
    }
</style>
<div>
    <ul>
        <li>1
            <ul>
                <li>11</li>
                <li>12</li>
                <li>13</li>
                <li>14</li>
                <li>15</li>
                <li>16</li>
            </ul>
        </li>
        <li>2
            <ul>
                <li>21</li>
                <li>22</li>
                <li>23</li>
                <li>24</li>
                <li>25</li>
                <li>26</li>
            </ul>
        </li>
        <li>3
            <ul>
                <li>31</li>
                <li>32</li>
                <li>33</li>
                <li>34</li>
                <li>35</li>
                <li>36</li>
            </ul>
        </li>
        <li>4
            <ul>
                <li>41</li>
                <li>42</li>
                <li>43</li>
                <li>44</li>
                <li>45</li>
                <li>46</li>
            </ul>
        </li>
        <li>5
            <ul>
                <li>51</li>
                <li>52</li>
                <li>53</li>
                <li>54</li>
                <li>55</li>
                <li>56</li>
            </ul>
        </li>
    </ul>
</div>

простенькое меню, если где намудрил не пинайте сильно))
за-то работает как на картинке....вроде бы smile