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

Объявление

🎲 Майский ваншот

Ленивая сезонная майская акция
Сыграем в настольную игру в дискорде?
Пишите, присоединяйтесь к обсуждению!

Подробности

GEMcross

Кроссовер, ориентированный на активную игру и уютный флуд.
Собираем у себя драгоценных игроков уже почти три года.

Посетить

🔥 Новинка в портфолио: ДИЗАЙН И ГРАФИКА В СТИЛЕ GENSHIN IMPACT

Платформа: MyBB.ru (RusFF)
Стоимость: 6500 рублей;
Авторы: Moju & wasurenagusa

Посмотреть

💰 Теперь у нас можно приобрести "Мгновенные уведомления от Алекса"

Скрипт оповещает пользователей о событиях на форуме в реальном времени, придавая динамики общению.
Автор: Alex_63 | Платформа: MyBB.ru.

У нас: структурированная документация, возможность платить иностранными картами, перевыпустить подписку или купить бессрочно.

Купить скрипт

🌟 ОПЛАТА ЗАКАЗА НАГРАДНЫМИ БАЛЛАМИ И СКИДКИ

Заказы можно оплачивать наградными баллами (НБ). Полностью или частично.
Бартер за НБ осуществляется на условиях платного заказа, в качестве оплаты - НБ.
А если у вас есть любой платный заказ, вы можете обменять НБ на скидочные купоны.

узнать подробности

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

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

Подробнее

SPECIAL OFFER: We distribute designs for free

Finalizing the layout for your project;
Developing a style code;
Mobile version included if you wish.

Details

Support the project

If you want to help us:
Become a moderator
Suggestions • Reviews

Details
СкрытьПоказать
❗ ❗ ❗ Technical work is underway. We'll fix it soon. :) If you're english-speaker and want to use our forum, switch to the russian language. This is temporary, until the works with multi-language option will be done. Sorry for the inconvenience.

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

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

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

Страница:   1 2 3 4 5  

Сообщений 31 страница 40 из 47

1

  • Автор: Gerda
  • технозомби
  • Gerda
  • Уважение: +9818
  • Достижения/подарки: cake 8 emoji_events 16
  • Наградные баллы: 1612
  • Проверенный спец:
    FD
    FD

ВСЕ скрипты и шаблоны для меню теперь здесь

перенесено

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

Горизонтальное ниспадающее (разворачивающееся) меню для форума или сайта (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.12 06:37)

+4

31

  • Автор: Пернатый
  • Бестелесный дух прошлого
  • Пернатый
  • Уважение: +351

хм. Всё прошло, когда код переписал.
Вопрос снят)

0

32

  • Автор: Йоша
  • Бестелесный дух прошлого
  • Йоша
  • Уважение: +51

Меню просто супер  http://i.smiles2k.net/love_smiles/wub1.gif  мечта идиота.

Только одна небольшая фигня - у меня всего 3 горизонтальных пункта и мне бы хотелось их разместить по центру, на определенном расстоянии друг от друга... а они кучкуются с левого края и я никак не могу их сдвинуть :(

0

33

  • Автор: sadhaka
  • Бестелесный дух прошлого
  • sadhaka
  • Уважение: +874

Йоша
дайте ссылку на то место, где экспериментируете

0

34

  • Автор: Йоша
  • Бестелесный дух прошлого
  • Йоша
  • Уважение: +51

пожалуйста, оно на самом верху

0

35

  • Автор: sadhaka
  • Бестелесный дух прошлого
  • sadhaka
  • Уважение: +874

Йоша
так пойдет?
http://easycaptures.com/fs/uploaded/516/6378109477.jpg

Если да, то сюда допишите выделенное красным:

#nav {
    background-image: url("http://skiesmaster.f-rpg.ru/uploads/000e/7f/14/278-1-f.png");
    font-family: arial,verdana,sans-serif;
    height: 30px;
    margin: auto;
    padding: 0 250px;
    position: relative;
    text-align: center;
    width: 967px;
    z-index: 500;
}

#nav li.top {
    display: block;
    float: left;
    height: 30px;
    margin-right: 35px;
}

+1

36

  • Автор: Йоша
  • Бестелесный дух прошлого
  • Йоша
  • Уважение: +51

sadhaka
Оооо, спасибо огромное))) все было так просто х) Похоже, по ночам мозг спит отдельно от меня...

0

37

  • Автор: Йоша
  • Бестелесный дух прошлого
  • Йоша
  • Уважение: +51

Аррр, стоп, теперь у меня фон меню в правую сторону размножился на 250рх....

0

38

  • Автор: sadhaka
  • Бестелесный дух прошлого
  • sadhaka
  • Уважение: +874

Йоша
Ну Вы добавили новые условия к задаче - фон, раньше его не было :)
измените в первом наборе правил отступ таким образом

padding: 0 0 0 250px;

Вообще, все это довольно коряво с точки зрения верстки. Я бы Вам посоветовала не устанавливать фон на меню, а подложить его вместе с шапкой, а меню просто позиционировать в нужное место.

+1

39

  • Автор: Йоша
  • Бестелесный дух прошлого
  • Йоша
  • Уважение: +51
sadhaka написал(а):

Я бы Вам посоветовала не устанавливать фон на меню, а подложить его вместе с шапкой, а меню просто позиционировать в нужное место

точняк) спасибо, так и сделаю))

sadhaka написал(а):

Ну Вы добавили новые условия к задаче - фон, раньше его не было

а вот и был, сами же процитировали часть моего кода с фоном чуть выше :Р

0

40

  • Автор: sadhaka
  • Бестелесный дух прошлого
  • sadhaka
  • Уважение: +874
Йоша написал(а):

а вот и был, сами же процитировали часть моего кода с фоном чуть выше :Р

не обратила внимание - вижу только то, что хочу увидеть. А у меня как видите оно не загрузилось :( Впрочем, это повод Вам задуматься, что у некоторых людей Ваша графика может и не подгружаться :)

Прошу прощения за невнимательность. Надо меня тыкать носом во все. Исправлюсь :)

0

Страница:   1 2 3 4 5