ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка

Объявление

Контакты:

Instagram: a.schmidt1895
WhatsApp: +7(938)116-19-35

Подробнее

Загадочный Дом «Кузнечик»

Форумные игры, кино, позитивное отношение и душевное общение!
Есть в мире место, где душе тепло...
Заходи, мы будем тебе рады!

Подробнее

Мийрон

Качественный пиар быстро и недорого.
Красивейшие дизайны по низким ценам.
Каталог ролевых игр.

Подробнее

Дизайн «Warlords of Draenor»

Детализированный rpg-дизайн для MyBB форума гильдии «Warlords of Draenor»
Стоимость при покупке эксклюзивно: 6300р
В стоимость входит настройка и корректировка дизайна под ваш проект.

Подробнее

Светлый дизайн в фентези стиле с аниме-графикой

Макет для светлого дизайна в фентези стиле с аниме-графикой.
Стоимость: 2600р*
Дизайн продается эксклюзивно (в одни руки).

Подробнее

Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Реклама на сайтеПредложения
Стать модераторомОтзывы

Подробнее
Открыта регистрация участников лотереи "Ролевые заявки" за июль. Не пропустите! Cрок регистрации до 10.08!

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.



Горизонтальное ниспадающее многоуровневое меню

Сообщений 21 страница 30 из 47

1

Берете у нас информацию? ПОЖАЛУЙСТА!!! СТАВЬТЕ ССЫЛКУ НА ЭТУ СТРАНИЦУ!

Горизонтальное ниспадающее (разворачивающееся) меню для форума или сайта (html+css). (c) Герда

Скриншот
https://forumupload.ru/uploads/0007/e3/f7/6822/231536.jpg

Преимущества этого меню:
1. Оно горизонтальное. (в тырнете очень много подобных вертикальных, но они не всем подходят)
2. Оно настраиваемое стилистически (чего нет во многих навигаторах)
3. Оно при отсутствии криворукости админа может содержать в себе великое разнообразие пунктов и вкладок.
4. Оно подойдет для любого сайта или форума, не конфликтует с премудростями движков

Недостатки:
1. новичкам в администрировании сложно настроить
2. оно разработано в первую очередь как именно МЕНЮ (то бишь удобный разворачивающийся список ссылок), а не сборник контейнеров для информации, поэтому тем, кто хочет засунуть туда баннеры, тексты, картинки придется поморочиться.

Гайд для новичков по настройке

Шаг 1. Составляем список ссылок.

Список ссылок составляется на html.
Для начала обозначаются главные пункты меню, которые будут расположены горизонтально

(например: "на главную", "FAQ", "важная информация" и т.п.)

<ul>
   <li><a href="ссылка">Пункт 1</a></li>
   <li><a href="ссылка">Пункт 2</a></li>
   <li><a href="ссылка">Пункт 3</a></li>
   <li><a href="ссылка">Пункт 4</a></li>
   ...и т.п.
</ul>

Затем создаем вертикальные ниспадающие списки под основными пунктами.
(например: "Важная информация" >> "Правила", "Навигация", "Партнерство" и т.п.)

<ul>
   <li><a href="ссылка">Пункт 1</a>
     <ul>
        <li><a href="ссылка">Пункт 1.1</a></li>
        <li><a href="ссылка">Пункт 1.2</a></li>
        <li><a href="ссылка">Пункт 1.3</a></li>
        ...и т.п.
     </ul>
   </li>
   <li><a href="ссылка">Пункт 2</a></li>
   <li><a href="ссылка">Пункт 3</a></li>
   <li><a href="ссылка">Пункт 4</a></li>
   ...и т.п.
</ul>

Далее можно создать дополнительные всплывающие списки, которые будут открываться справа при наведении на пункт меню.
(например: "Важная информация" >> "Правила" >> "правила регистрации", "правила общения", "правила заказов" и т.п.)

<ul>
   <li><a href="ссылка">Пункт 1</a>
     <ul>
        <li><a href="ссылка">Пункт 1.1</a></li>
        <li><a href="ссылка">Пункт 1.2</a></li>
        <li><a href="ссылка">Пункт 1.3</a>
          <ul>
             <li><a href="ссылка">Пункт 1.3.1</a></li>
             <li><a href="ссылка">Пункт 1.3.2</a></li>
             <li><a href="ссылка">Пункт 1.3.3</a></li>
             <li><a href="ссылка">Пункт 1.3.4</a></li>
             ...и т.п.
          </ul>
        </li>
     </ul>
   </li>
   <li><a href="ссылка">Пункт 2</a></li>
   <li><a href="ссылка">Пункт 3</a></li>
   <li><a href="ссылка">Пункт 4</a></li>
   ...и т.п.
</ul>

Подпунктов и вкладок может быть бесконечное множество. Главное - не запутаться и не забывать замыкать теги.
Советую всем составлять список в MS Word, выделяя цветами различные списки, как продемонстрировано здесь.

Шаг 1. Идентификация списков.

Теперь необходимо расставить в меню классы и id, чтобы потом использовать их в css для настройки разного стиля для различных списков (вкладок меню).

Для главного списка, расположенного горизонтально:

<ul id="nav">...</ul>

Для пунктов главного списка, расположенных горизонтально:

<li class="top"><a href="ссылка" class="top_link">...</a></li>

Для пунктов главного списка, в которых присутствуют ниспадающие списки:

<li class="top"><a href="ссылка" class="top_link"><span class="down">...</span></a></li>

Для ниспадающих списков из главных пунктов:

<ul class="sub">...</ul>

Для пунктов всех списков, у которых есть дополнительные подпункты (открывающиеся справа)

<li><a href="ссылка" class="fly">...</a></li>

Для примера можете рассмотреть код меню, стоявший у нас на форуме:

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Html-код списка готов. Вы можете вставлять его в любое место на форуме или сайте, где вы хотите видеть горизонтальное меню.

Шаг 3. Стилизация меню.

Теперь необходимо сделать список горизонтальным и настроить дизайн для различных типов списков.

Для главного списка, расположенного горизонтально:

#nav {...}

Для главного списка, расположенного горизонтально при наведении курсора:

#nav li:hover {...}

Для пунктов главного списка, расположенных горизонтально:

#nav li.top {...}
#nav li a.top_link {...}
#nav li a.top_link span {...}

Для пунктов главного списка, в которых присутствуют ниспадающие списки:

#nav li a.top_link span.down {...}

Для пунктов главного списка, расположенных горизонтально при наведении курсора:

#nav li:hover a.top_link,
#nav li.iehover a.top_link {....}
#nav li:hover a.top_link span,
#nav li.iehover a.top_link span {....}

Для пунктов главного списка, в которых присутствуют ниспадающие списки при наведении курсора:

#nav li:hover a.top_link span.down,
#nav li.iehover a.top_link span.down {....}

Для ниспадающих списков из главных пунктов:

#nav li:hover ul.sub
{....}

Для ПУНКТОВ ниспадающих списков из главных пунктов:

#nav li:hover ul.sub li
{...}
#nav li:hover ul.sub li a
{...}

Для ниспадающих списков из главных пунктов при наведении курсора:

#nav li:hover ul.sub li a:hover
{....}

Для пунктов всех списков, у которых есть дополнительные подпункты (открывающиеся справа):

#nav li ul.sub li a.fly
{...}

и т.п.

образец кода
Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Эксперементируйте с этим кодом, подгоняя под свой стиль.

Полученный код вставляется в style.css (или в html-верх под тегами "style").


Пример стилизации:
[html]    <div class='nav'>
     <ul id='nav'>
       <li class='top'><a href='Ваша ссылка' id='' class='top_link'><span class='down'><strong>Меню. Кнопка 1</strong></span></a>
          <ul class='sub'>
         <li><a href='Ваша ссылка' class='fly'><strong>Меню первого уровня. 1</strong></a>
               <ul> 
      <li><a href='Ваша ссылка'><strong>Меню второго уровня. 1</strong></a></li>
      <li><a href='Ваша ссылка'><strong>Меню второго уровня. 2</strong></a></li>
      <li><a href='Ваша ссылка'><strong>Меню второго уровня. 3</strong></a></li>
              <li><a href='Ваша ссылка'><strong>Меню второго уровня. 4</strong></a></li> 
       </ul>
               </li>
     <li><a href='Ваша ссылка' class='fly'><strong>Меню первого уровня. 2</strong></a>
               <ul>
              <li><a href='Ваша ссылка'><strong>Меню второго уровня. 1</strong></a></li>
      <li><a href='Ваша ссылка'><strong>Меню второго уровня. 2</strong></a></li>
          <li><a href='Ваша ссылка'><strong>Меню второго уровня. 3</strong></a></li>
      <li><a href='Ваша ссылка'><strong>Меню второго уровня. 4</strong></a></li>  
       </ul>
               </li>
     <li><a href='Ваша ссылка' class='fly'><strong>Меню первого уровня. 3</strong></a>
               <ul>                                 
          <li><a href='Ваша ссылка'><strong>Меню второго уровня. 1</strong></a></li>
          <li><a href='Ваша ссылка'><strong>Меню второго уровня. 2</strong></a></li>
      <li><a href='Ваша ссылка'><strong>Меню второго уровня. 3</strong></a></li>
              <li><a href='Ваша ссылка'><strong>Меню второго уровня. 4</strong></a></li>  
       </ul>
              </li>
         </ul>
        </li>    
       <li class='top'><a href='Ваша ссылка' id='' class='top_link'><span class='down'><strong>Меню. Кнопка 2</strong></span></a>
          <ul class='sub'>
         <li><a href='Ваша ссылка' ><strong>Меню первого уровня. 1</strong></a></li>
             <li><a href='Ваша ссылка' class='fly'><strong>Меню первого уровня. 2</strong></a>
          <ul>
        <li><a href='Ваша ссылка'><strong>Меню второго уровня. 1</strong></a></li>
    <li><a href='Ваша ссылка'><strong>Меню второго уровня. 2</strong></a></li>
    <li><a href='Ваша ссылка' class='fly'><strong>Меню второго уровня. 3</strong></a>
       <ul>
              <li><a href='Ваша ссылка'><strong>Меню третьего уровня. 1</strong></a></li>
          <li><a href='Ваша ссылка'><strong>Меню третьего уровня. 2</strong></a></li>
      <li><a href='Ваша ссылка'><strong>Меню третьего уровня. 3</strong></a></li>  
       </ul>
                     </li>     
    <li><a href='Ваша ссылка' class='fly'><strong>Меню второго уровня. 4</strong></a>
       <ul>
              <li><a href='Ваша ссылка' class='fly'><strong>Меню третьего уровня. 1</strong></a>
        <ul>
        <li><a href='Ваша ссылка'><strong>Меню четвертого уровня. 1</strong></a></li>
    <li><a href='Ваша ссылка'><strong>Меню четвертого уровня. 2</strong></a></li>
    <li><a href='Ваша ссылка'><strong>Меню четвертого уровня. 3</strong></a></li>
    </ul>
    </li>
          <li><a href='Ваша ссылка'><strong>Меню второго уровня. 3</strong></a></li>
                          <li><a href='Ваша ссылка'><strong>Меню второго уровня. 4</strong></a></li>  
       </ul>
                     </li>
      </ul>
      </li>
      <li><a href='Ваша ссылка' ><strong>Меню первого уровня. 3</strong></a></li>
       </ul>
        </li>
       <li class='top'><a href='Ваша ссылка' id='' class='top_link'><span><strong>Меню. Кнопка 2</strong></span></a></li>
        </ul>
    </div>
    <style type="text/css">
    /*------------------------------- Меню ------------------------------------*/
    #nav {width: 100%; top:0; left:0; padding:0; margin: 0; list-style:none; height:35px; background:transparent url(http://s2.uploads.ru/Vgpzo.png) repeat-x; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}
    #nav li.top {display:block; float:left; height:38px;}
    #nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#D1EEEE; text-decoration:none; font-size:18px; font-weight:normal; padding: 0 0 0 4px; cursor:pointer; background: url(http://s2.uploads.ru/Vgpzo.png);}
    #nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(http://s2.uploads.ru/Vgpzo.png) right top no-repeat;}
    #nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(http://s2.uploads.ru/vObBI.png) no-repeat right top;}
     
    #nav li:hover a.top_link,
    #nav li.iehover a.top_link {color:#fff; background: url(http://s3.uploads.ru/JvITO.png) no-repeat; cursor:pointer;}
    #nav li:hover a.top_link span,
    #nav li.iehover a.top_link span {background: url(http://s3.uploads.ru/JvITO.png) no-repeat right top; cursor:pointer;}
    #nav li:hover a.top_link span.down,
    #nav li.iehover a.top_link span.down {background: url(http://s2.uploads.ru/qQOKD.png) no-repeat right top; cursor:pointer;}
     
    /* Моделирование списка по умолчанию */
     
    #nav li:hover {position:relative; z-index:200; cursor:pointer;}
     
    #nav li:hover ul.sub
    {left:1px; top:35px; background: #1F242B; padding:3px; border:1px solid #000; white-space:nowrap; width:245px; height:auto; z-index:300; cursor:pointer;}
    #nav li:hover ul.sub li
    {display:block; height:20px; position:relative; float:left; width:245px; font-weight:normal; cursor:pointer;}
    #nav li:hover ul.sub li a
    {display:block; font-size:12px; height:18px; width:242px; line-height:18px; text-indent:5px; color:#ccc; text-decoration:none; border:1px solid #1F242B; cursor:pointer;}
    #nav li ul.sub li a.fly
    {background:#1F242B url(http://s3.uploads.ru/kzSlM.png) 229px 6px no-repeat; cursor:pointer;}
    #nav li:hover ul.sub li a:hover
    {background:#607B8B; color:#000; border-color:#fff; cursor:pointer;}
    #nav li:hover ul.sub li a.fly:hover
    {background:#68838B url(http://s2.uploads.ru/YMr8N.png) 229px 6px no-repeat; color:#fff; cursor:pointer; left:1px;}
     
     
    #nav li:hover li:hover ul,
    #nav li:hover li:hover li:hover ul,
    #nav li:hover li:hover li:hover li:hover ul,
    #nav li:hover li:hover li:hover li:hover li:hover ul
    {left:245px; top:-4px; background: #1F242B; padding:3px; border:1px solid #000; white-space:nowrap; width:245px; z-index:400; height:auto;}
     
    #nav ul,
    #nav li:hover ul ul,
    #nav li:hover li:hover ul ul,
    #nav li:hover li:hover li:hover ul ul,
    #nav li:hover li:hover li:hover li:hover ul ul
    {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
     
    #nav li:hover li:hover a.fly,
    #nav li:hover li:hover li:hover a.fly,
    #nav li:hover li:hover li:hover li:hover a.fly,
    #nav li:hover li:hover li:hover li:hover li:hover a.fly
    {background:#607B8B url(http://s2.uploads.ru/YMr8N.png) 229px 6px no-repeat; color:#000; border-color:#fff;}
     
    #nav li:hover li:hover li a.fly,
    #nav li:hover li:hover li:hover li a.fly,
    #nav li:hover li:hover li:hover li:hover li a.fly
    {background:#1F242B url(http://s3.uploads.ru/kzSlM.png) 229px 6px no-repeat; color:#ccc; border-color:#fff; border:1px;}
    </style>[/html]

Код:
    <div class='nav'>
     <ul id='nav'>
       <li class='top'><a href='Ваша ссылка' id='' class='top_link'><span class='down'><strong>Меню. Кнопка 1</strong></span></a>
          <ul class='sub'>
    	     <li><a href='Ваша ссылка' class='fly'><strong>Меню первого уровня. 1</strong></a>
               <ul>  
    	  <li><a href='Ваша ссылка'><strong>Меню второго уровня. 1</strong></a></li>
    	  <li><a href='Ваша ссылка'><strong>Меню второго уровня. 2</strong></a></li>
    	  <li><a href='Ваша ссылка'><strong>Меню второго уровня. 3</strong></a></li>
    	          <li><a href='Ваша ссылка'><strong>Меню второго уровня. 4</strong></a></li>  
       </ul>
               </li>
     <li><a href='Ваша ссылка' class='fly'><strong>Меню первого уровня. 2</strong></a>
               <ul>
    	          <li><a href='Ваша ссылка'><strong>Меню второго уровня. 1</strong></a></li>
    	  <li><a href='Ваша ссылка'><strong>Меню второго уровня. 2</strong></a></li>
          <li><a href='Ваша ссылка'><strong>Меню второго уровня. 3</strong></a></li>
    	  <li><a href='Ваша ссылка'><strong>Меню второго уровня. 4</strong></a></li>	  
       </ul>
               </li>
     <li><a href='Ваша ссылка' class='fly'><strong>Меню первого уровня. 3</strong></a>
               <ul>                                  
          <li><a href='Ваша ссылка'><strong>Меню второго уровня. 1</strong></a></li>
          <li><a href='Ваша ссылка'><strong>Меню второго уровня. 2</strong></a></li>
    	  <li><a href='Ваша ссылка'><strong>Меню второго уровня. 3</strong></a></li>
    	          <li><a href='Ваша ссылка'><strong>Меню второго уровня. 4</strong></a></li>	  
       </ul>
              </li>
      	   </ul>
        </li>	   
       <li class='top'><a href='Ваша ссылка' id='' class='top_link'><span class='down'><strong>Меню. Кнопка 2</strong></span></a>
          <ul class='sub'>
    	     <li><a href='Ваша ссылка' ><strong>Меню первого уровня. 1</strong></a></li>
             <li><a href='Ваша ссылка' class='fly'><strong>Меню первого уровня. 2</strong></a>
          <ul>
    	    <li><a href='Ваша ссылка'><strong>Меню второго уровня. 1</strong></a></li>
    <li><a href='Ваша ссылка'><strong>Меню второго уровня. 2</strong></a></li>
    <li><a href='Ваша ссылка' class='fly'><strong>Меню второго уровня. 3</strong></a>
       <ul>
    	          <li><a href='Ваша ссылка'><strong>Меню третьего уровня. 1</strong></a></li>
          <li><a href='Ваша ссылка'><strong>Меню третьего уровня. 2</strong></a></li>
    	  <li><a href='Ваша ссылка'><strong>Меню третьего уровня. 3</strong></a></li>	  
       </ul>
                     </li>      
    <li><a href='Ваша ссылка' class='fly'><strong>Меню второго уровня. 4</strong></a>
       <ul>
    	          <li><a href='Ваша ссылка' class='fly'><strong>Меню третьего уровня. 1</strong></a>
    	    <ul>
        <li><a href='Ваша ссылка'><strong>Меню четвертого уровня. 1</strong></a></li>
    	<li><a href='Ваша ссылка'><strong>Меню четвертого уровня. 2</strong></a></li>
    	<li><a href='Ваша ссылка'><strong>Меню четвертого уровня. 3</strong></a></li>
    </ul>
    </li>
          <li><a href='Ваша ссылка'><strong>Меню второго уровня. 3</strong></a></li>
                          <li><a href='Ваша ссылка'><strong>Меню второго уровня. 4</strong></a></li>	  
       </ul>
                     </li>
    	  </ul> 
      </li>
      <li><a href='Ваша ссылка' ><strong>Меню первого уровня. 3</strong></a></li>
    	   </ul>
        </li>	
       <li class='top'><a href='Ваша ссылка' id='' class='top_link'><span><strong>Меню. Кнопка 2</strong></span></a></li>
        </ul>
    </div>
    <style type="text/css">
    /*------------------------------- Меню ------------------------------------*/
    #nav {width: 100%; top:0; left:0; padding:0; margin: 0; list-style:none; height:35px; background:transparent url(http://s2.uploads.ru/Vgpzo.png) repeat-x; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}
    #nav li.top {display:block; float:left; height:38px;}
    #nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#D1EEEE; text-decoration:none; font-size:18px; font-weight:normal; padding: 0 0 0 4px; cursor:pointer; background: url(http://s2.uploads.ru/Vgpzo.png);}
    #nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(http://s2.uploads.ru/Vgpzo.png) right top no-repeat;}
    #nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(http://s2.uploads.ru/vObBI.png) no-repeat right top;}
     
    #nav li:hover a.top_link,
    #nav li.iehover a.top_link {color:#fff; background: url(http://s3.uploads.ru/JvITO.png) no-repeat; cursor:pointer;}
    #nav li:hover a.top_link span,
    #nav li.iehover a.top_link span {background: url(http://s3.uploads.ru/JvITO.png) no-repeat right top; cursor:pointer;}
    #nav li:hover a.top_link span.down,
    #nav li.iehover a.top_link span.down {background: url(http://s2.uploads.ru/qQOKD.png) no-repeat right top; cursor:pointer;}
     
    /* Моделирование списка по умолчанию */
     
    #nav li:hover {position:relative; z-index:200; cursor:pointer;}
     
    #nav li:hover ul.sub
    {left:1px; top:35px; background: #1F242B; padding:3px; border:1px solid #000; white-space:nowrap; width:245px; height:auto; z-index:300; cursor:pointer;}
    #nav li:hover ul.sub li
    {display:block; height:20px; position:relative; float:left; width:245px; font-weight:normal; cursor:pointer;}
    #nav li:hover ul.sub li a
    {display:block; font-size:12px; height:18px; width:242px; line-height:18px; text-indent:5px; color:#ccc; text-decoration:none; border:1px solid #1F242B; cursor:pointer;}
    #nav li ul.sub li a.fly
    {background:#1F242B url(http://s3.uploads.ru/kzSlM.png) 229px 6px no-repeat; cursor:pointer;}
    #nav li:hover ul.sub li a:hover
    {background:#607B8B; color:#000; border-color:#fff; cursor:pointer;}
    #nav li:hover ul.sub li a.fly:hover
    {background:#68838B url(http://s2.uploads.ru/YMr8N.png) 229px 6px no-repeat; color:#fff; cursor:pointer; left:1px;}
     
     
    #nav li:hover li:hover ul,
    #nav li:hover li:hover li:hover ul,
    #nav li:hover li:hover li:hover li:hover ul,
    #nav li:hover li:hover li:hover li:hover li:hover ul
    {left:245px; top:-4px; background: #1F242B; padding:3px; border:1px solid #000; white-space:nowrap; width:245px; z-index:400; height:auto;}
     
    #nav ul,
    #nav li:hover ul ul,
    #nav li:hover li:hover ul ul,
    #nav li:hover li:hover li:hover ul ul,
    #nav li:hover li:hover li:hover li:hover ul ul
    {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
     
    #nav li:hover li:hover a.fly,
    #nav li:hover li:hover li:hover a.fly,
    #nav li:hover li:hover li:hover li:hover a.fly,
    #nav li:hover li:hover li:hover li:hover li:hover a.fly
    {background:#607B8B url(http://s2.uploads.ru/YMr8N.png) 229px 6px no-repeat; color:#000; border-color:#fff;}
     
    #nav li:hover li:hover li a.fly,
    #nav li:hover li:hover li:hover li a.fly,
    #nav li:hover li:hover li:hover li:hover li a.fly
    {background:#1F242B url(http://s3.uploads.ru/kzSlM.png) 229px 6px no-repeat; color:#ccc; border-color:#fff; border:1px;}
    </style>

Отредактировано Герда (27.10.2012 06:37:16)

+4

21

Герда *ударила себя по бестолковому лбу. * спасибо тебе за внимание) Я не вставила 1 часть кода(

0

22

*начинаю рвать на себе волосы.... что то меню не хочет мне подчиняться)))  как его оторвать от вверха и спустить ниже???

0

23

Настюха
напиши перед HTML-кодом меню тег <br/> (это перенос на следующую строку)  http://i.smiles2k.net/aiwan_smiles/smile3.gif

0

24

Это как то коряво получается. Форум опускается вместе с меню. Если поднимаею его в части D, то в админке все ползет вверх...

хочу чтоб вот так выглядело

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

0

25

Настюха

тогда помести меню в контейнер:

<div id="bla-bla-bla">
тут код меню
</div>

и двигаем контейнер через css:

#bla-bla-bla {
position: relative;
top: 300px;
}

0

26

Герда написал(а):

bla-bla-bla

кхм..извини, но я не спец в кодах, с трудом постигаю это, поэтому этот момент не поняла

0

27

Как поменять фон списка?????????

0

28

Дафна де Лорена

Герда написал(а):

Для главного списка, расположенного горизонтально:
#nav {...}

Чтобы поменять фон, в любом коде, нужно прописать
background: url(ссылка на картинку);   или
background-color: #код цвета;
Т.е. вместе с селектором это будет выглядеть так:
#nav {background: url(ссылка на картинку);}  или
#nav {background-color: #код цвета;}

0

29

У меня легко меню получилось, что у всех проблемы?
ИЗ горизонтального меню можно сделать вертикальное? Или это два разных кода?

0

30

скрипт|скрипт

<ul id="nav">
<li class="top"><a href="http://justexample.rolka.su/" class="top_link"><span>НА
ГЛАВНУЮ</span></a></li>
<li class="top"><a href="http://belforest.rolka.su/viewtopic.php?id=12" id="" class="top_link"><span class="down">Правила</span></a>
    <ul class="sub">
    <li><a href="http://belforest.rolka.su/viewtopic.php?id=12#p35">Правила общения</a></li>
    <li class="mid"><a href="http://belforest.rolka.su/viewtopic.php?id=12#p36">Об Авторском Праве</a>
</li>
    <li class="mid"><a href="http://belforest.rolka.su/viewtopic.php?id=12#p211">Об Игре</a>
    </li>
   <li class="mid"><a href="http://belforest.rolka.su/viewtopic.php?id=12#p239">Нормативы</a>
    </li>
   <li class="mid"><a href="ссылка">Администрация</a>
    </li>
</ul>
<li class="top"><a href="http://belforest.rolka.su/viewtopic.php?id=36" id="" class="top_link"><span class="down">Игромеханика </span></a>
    <ul class="sub">
    <li><a href="http://belforest.rolka.su/viewtopic.php?id=36#p248">Физиология</a></li>
    <li><a href="http://belforest.rolka.su/viewtopic.php?id=36#p249">"Хочу Эпический Уровень!"</a></li>
    <li><a href="http://belforest.rolka.su/viewtopic.php?id=36#p253" class="fly">Навыки в игре</a>
        <ul>
            <li><a
href="ссылка">Магические</a></li>
            <li><a
href="ссылка">Боевые</a></li>
            <li><a
href="ссылка">Бытовые</a></li>
            <li><a
href="ссылка">Хобби и другие</a></li>
        </ul>
                                   </li>
<li><a href="http://belforest.rolka.su/viewtopic.php?id=36#p253" class="fly">Поиски</a>
        <ul>
            <li><a
href="ссылка">Поиск игроков</a></li>
            <li><a
href="ссылка">Поиск сюжетов</a></li>
            <li><a
href="ссылка">Поиск случайностей</a></li>
            <li><a
href="ссылка">Поиск квестов</a></li>
        </ul>
                                   </li>
    </ul>
</li>
<li class="top"><a href="" id="" class="top_link"><span
class="down">Библиотека</span></a>
    <ul class="sub">
    <li><a href="" class="fly">Космология</a>
        <ul>
            <li><a
href="ссылка">Происхождение мира</a></li>
            <li><a
href="ссылка">Астрология</a></li>
            <li><a
href="ссылка">Известные звёзды</a></li>
            <li><a
href="ссылка">Навигация </a></li>
        </ul>
                                   </li>
    <li><a href="ссылка">Оружейная</a></li>
    </ul>
</li>
</ul>
<style>
#nav {padding:0; margin:0; list-style:none; height:33px; background-image: url(http://i058.radikal.ru/1107/f3/dfb468750339.png); repeat:no repeat; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}
#nav li.top {display:block; float:left; height:38px;}
#nav li a.top_link {display:block; float:left; height:45px; line-height:33px; color:#000; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:45px}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:45px; background: url(http://i058.radikal.ru/1107/f3/dfb468750339.png) no-repeat right top;}
#nav li:hover a.top_link,
#nav li.iehover a.top_link {color:#000; background: url() no-repeat; cursor:pointer;}
#nav li:hover a.top_link span,
#nav li.iehover a.top_link span {background:url() no-repeat right top; cursor:pointer;}
#nav li:hover a.top_link span.down,
#nav li.iehover a.top_link span.down {background:url() no-repeat right top; cursor:pointer;}
/* Default list styling */
#nav li:hover {position:relative; z-index:200; cursor:pointer;}
#nav li:hover ul.sub
{left:1px; top:38px; background: #FFE4C4; padding:3px; border:1px solid #000; white-space:nowrap; width:160px; height:auto; z-index:300; cursor:pointer;}
#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:150px; font-weight:normal; cursor:pointer;}
#nav li:hover ul.sub li a
{display:block; font-size:11px; height:18px; width:160px; line-height:18px; text-indent:5px; color:#000; text-decoration:none;border:1px solid #FFE4C4; cursor:pointer;}
#nav li ul.sub li a.fly
{background:#FFE4C4 url(http://i058.radikal.ru/1107/f3/dfb468750339.png) 150px 6px no-repeat; cursor:pointer;}
#nav li:hover ul.sub li a:hover
{background-image: url(http://i058.radikal.ru/1107/f3/dfb468750339.png); color:#000; border-color:#000; cursor:pointer;}
#nav li:hover ul.sub li a.fly:hover
{background:#FFE4C4 url(http://i058.radikal.ru/1107/f3/dfb468750339.png) 150px 6px no-repeat; color:#8B4726; cursor:pointer;}
#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:155px; top:-4px; background: #FFE4C4; padding:3px; border:1px solid #000; white-space:nowrap; width:160px; z-index:400; height:auto;}
#nav ul,
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
#nav li:hover li:hover a.fly,
#nav li:hover li:hover li:hover a.fly,
#nav li:hover li:hov
er li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover li:hover a.fly
{background:#FFE4C4url(http://i058.radikal.ru/1107/f3/dfb468750339.png) 150px 6px no-repeat; color:#000; border-color:#8B4726;}
#nav li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li:hover li a.fly
{background:#ffffff url(http://i058.radikal.ru/1107/f3/dfb468750339.png) 150px 6px no-repeat; color:#000; border-color:#fff;}
</style>

при постановке - съезжает шапка. в чём проблема?

0