VPF::Помогите переделать меню на CSS

Borland_Delphi_6

Дата 15.12.2011, 21:28 (ссылка)

(нет голосов)

Загрузка ...

LoneLINEss

Профиль
Группа: Участник Клуба
Сообщений: 2509
Регистрация: 5.11.2002
Где: in fortune dreams ...

Репутация: нет
Всего: 20

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

Код в аттаче.

Присоединённый файл ( Кол-во скачиваний: 4 )

menu.zip 1,20 Kb

--------------------

Blind Guardian Fan :: BMSTU Student :: A polar bear is a rectangular bear after a coordinate transform.

Мои фотографии

Evghenusi

Дата 16.12.2011, 01:36 (ссылка)

(нет голосов)

Загрузка ...

майский жук

Профиль
Группа: Участник
Сообщений: 506
Регистрация: 3.8.2006
Где: Молдова, Кишинёв

Репутация: 3
Всего: 15

Код


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

подойдёт?

Borland_Delphi_6

Дата 16.12.2011, 16:22 (ссылка)

(нет голосов)

Загрузка ...

LoneLINEss

Профиль
Группа: Участник Клуба
Сообщений: 2509
Регистрация: 5.11.2002
Где: in fortune dreams ...

Репутация: нет
Всего: 20

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

Присоединённый файл ( Кол-во скачиваний: 11 )

Untitled_3.jpg 10,49 Kb

--------------------

Blind Guardian Fan :: BMSTU Student :: A polar bear is a rectangular bear after a coordinate transform.

Мои фотографии

$дмитрий

Дата 16.12.2011, 17:22 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1037
Регистрация: 19.6.2004

Репутация: 10
Всего: 45

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

Borland_Delphi_6

Дата 16.12.2011, 17:52 (ссылка)

(нет голосов)

Загрузка ...

LoneLINEss

Профиль
Группа: Участник Клуба
Сообщений: 2509
Регистрация: 5.11.2002
Где: in fortune dreams ...

Репутация: нет
Всего: 20

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

--------------------

Blind Guardian Fan :: BMSTU Student :: A polar bear is a rectangular bear after a coordinate transform.

Мои фотографии

Evghenusi

Дата 16.12.2011, 19:59 (ссылка)

(нет голосов)

Загрузка ...

майский жук

Профиль
Группа: Участник
Сообщений: 506
Регистрация: 3.8.2006
Где: Молдова, Кишинёв

Репутация: 3
Всего: 15

Borland_Delphi_6, как вам такое меню ?

Borland_Delphi_6

Дата 17.12.2011, 14:24 (ссылка)

(нет голосов)

Загрузка ...

LoneLINEss

Профиль
Группа: Участник Клуба
Сообщений: 2509
Регистрация: 5.11.2002
Где: in fortune dreams ...

Репутация: нет
Всего: 20

Evghenusi, я изначально делал по образу и подобию этого меню. И меню по Вашей ссылке, и по моей работают одинаково и имеют один и тот же недостаток: вложенные меню открываются где-то вдалеке от родителя. Хотя может на реальной структуре меню это будет и не так ощутимо... В общем, поэкспериментирую еще. В любом случае - спасибо за помощь!

--------------------

Blind Guardian Fan :: BMSTU Student :: A polar bear is a rectangular bear after a coordinate transform.

Мои фотографии

Evghenusi

Дата 17.12.2011, 16:02 (ссылка)

(нет голосов)

Загрузка ...

майский жук

Профиль
Группа: Участник
Сообщений: 506
Регистрация: 3.8.2006
Где: Молдова, Кишинёв

Репутация: 3
Всего: 15

Цитата(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 (ссылка)

(нет голосов)

Загрузка ...

майский жук

Профиль
Группа: Участник
Сообщений: 506
Регистрация: 3.8.2006
Где: Молдова, Кишинёв

Репутация: 3
Всего: 15

Код


<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

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »