20 Ноября 2017, 00:27:38

Автор Тема: Помогите сделать горизонтальное выпадающие меню простенькое  (Прочитано 8367 раз)

0 Пользователей и 1 Гость просматривают эту тему.

Оффлайн cxem

  • Кандидат
  • *
  • Сообщений: 22
  • Репутация: 6
Добрый день помогите кто может сделать выпадающие горизонтальное меню для шаблона Gemini  самое простое thanks
http://chenilo.ru Все для радиолюбителя!

Оффлайн cxem

  • Кандидат
  • *
  • Сообщений: 22
  • Репутация: 6
Добрый день помогите кто может сделать выпадающие горизонтальное меню для шаблона Gemini  самое простое thanks
пример как на этом сайте http://radiomaster.com.ua/ )
http://chenilo.ru Все для радиолюбителя!

Оффлайн MeN

  • Never Back Down
  • Глобальный модератор
  • Старожил
  • ****
  • Сообщений: 395
  • Репутация: 4
  • Пол: Мужской
  • Да будет так!

               <div><a href="#"><span>Datalife Engine</span>[/url]</div>
                 <li class="dropmenu" style="display: block;">
                    <ul class="submenu">
                        <li><a href="/dle/">DLE[/url]</li>
                        <li><a href="/dle/">DLE [/url]</li>
                        <li><a href="/dle/">DLE [/url]</li>
                        <li><a href="/dle/">DLE [/url]</li>
                    </ul>
                  </li>
             




« Последнее редактирование: 15 Апреля 2013, 02:24:20 от MeN »
Ученье - свет, неученье - тьма.

Оффлайн cxem

  • Кандидат
  • *
  • Сообщений: 22
  • Репутация: 6
не работает или я кривой или не знаю что...но все равно спасибо за попытку помочь..)
http://chenilo.ru Все для радиолюбителя!

Оффлайн BAKS1K

  • Постоялец
  • ***
  • Сообщений: 172
  • Репутация: 7
  • Пол: Мужской
    • Создай Свой Игровой Сервер с www.valve-server.ru
Нет, с тобой вс в порядке, просто там где написано [/url] это форум зачем то заменяет тег /a втаких скобках <>. Щас дам ссылку с правильным кодом

Оффлайн BAKS1K

  • Постоялец
  • ***
  • Сообщений: 172
  • Репутация: 7
  • Пол: Мужской
    • Создай Свой Игровой Сервер с www.valve-server.ru
Вот ссылка: http://rghost.ru/private/45302985/243d7aacb8720887dc671b5c87bd5afe
В точности такое же меню, щас у нах вырезал из кода.
CSS код для того чтобы работало правильно. Найти такой код в style.css:
Цитировать
/*---Menu---*/
.darkbg { background: #222a30 url("../images/darkbg.png"); }
#menubar { padding: 0 12px; height: 50px; border-top: 1px solid #646c74; background: url("../images/topshd.png") no-repeat 50% 0; }
   #menubar .lcol, #menubar .lcol ul, #menubar .lcol ul li, #menubar .lcol ul a { float: left; }
   #menubar .lcol { overflow: hidden; height: 50px; }
      #menubar .lcol ul { font-size: 1.15em; line-height: 49px; margin-left: -2px; }
         #menubar .lcol ul li { background: url("../images/mbar.png") no-repeat; }
         #menubar .lcol ul a { padding: 0 11px 0 12px; color: #fff; height: 50px; text-decoration: none; }
         #menubar .lcol ul a:hover { color: #da143d; background: url("../images/mbar.png") no-repeat 50% 100%; }
И заменить полностью на это:
Цитировать
/*---Menu---*/
.darkbg {background: #222a30 url("../images/darkbg.png"); }
#menubar { padding: 0 12px 0 0; height: 38px; border-top: 1px solid #646c74; background: url("../images/topshd.png") no-repeat 50% 0; }

/*
  LEVEL ONE
*/
.dropdown  *{
  margin:0;
  padding:0;
}

/*
  LEVEL ONE
*/
ul.dropdown                         { position: relative; z-index: 11000;}
ul.dropdown li                      { font-size: 16px; height:38px; line-height: 38px; color: #fff; float: left; zoom: 1; }
ul.dropdown a:hover                { color: #000; background: url("../images/vtitle.png") repeat scroll 0 0 #28d11d;}
ul.dropdown a:active                { color: #ffa500; }
ul.dropdown li a                    { display: block; padding: 0 15px;
                     color: #fff; border-right: 1px solid #646c74;}

ul.dropdown li.hover,
ul.dropdown li:hover                { background: #F3D673; color: black; position: relative; }
ul.dropdown li.hover a              { color: black; }


/*
  LEVEL TWO
*/
ul.dropdown ul             { border: 1px solid #ccc;  border-bottom: none; width: 220px; visibility: hidden; position: absolute; top: 100%; left: 0; }
ul.dropdown ul li           { font-size: 13px; height:22px; line-height: 22px;  background: #f6f6f6; color: #000;
                    border-bottom: 1px solid #ccc; float: none; }

ul.dropdown ul li a          {padding: 0 0 0 10px; text-decoration: none;  border-right: none; width: 210px; display: inline-block; }

/*
  LEVEL THREE
*/
ul.dropdown ul ul           {font-size: 13px; height:22px; zoom: 1; line-height: 22px; left: 100%; top: 0; }
ul.dropdown li:hover > ul       { visibility: visible; }
Вроде должно работать. :D

Оффлайн BAKS1K

  • Постоялец
  • ***
  • Сообщений: 172
  • Репутация: 7
  • Пол: Мужской
    • Создай Свой Игровой Сервер с www.valve-server.ru
Кстати, вот ещё доработка, замени себе картинку если нужен цвет такой же: http://radiomaster.com.ua/templates/radio/images/vtitle.png
Далее чтобы меню выпадающее не смещалось немного вправо и поиск немного не уезжал вниз, найди такой код в style.css
Цитировать
   /*---search---*/
   .searchbar { margin-top: 12px; border: 1px solid #3f464c; border-width: 0 1px 1px 0; float: right; width: 217px; height: 26px; background: #191f24 url("../images/search.png") no-repeat; }
      .searchbar li { float: left; height: 26px; }
      .searchbar .lfield { width: 180px; padding-left: 7px; overflow: hidden; }
         .searchbar .lfield input { font-style: italic; color: #8b99a8; float: left; height: 15px; width: 180px; border: 0 none; background: none; margin-top: 6px; }
      
      .searchbar .lbtn input { width: 30px; height: 26px; background: #db143d url("../images/search.png") no-repeat 0 -26px; }
         .searchbar .lbtn input:hover { background-position: -30px -26px; }
И замени на этот:
Цитировать
/*---search---*/
  .searchbar { margin-top: 6px; border: 1px solid #3f464c; border-width: 0 1px 1px 0; float: right; width: 217px; height: 26px; background: #191f24 url("../images/search.png") no-repeat; }
    .searchbar li { float: left; height: 26px; }
    .searchbar .lfield { width: 180px; padding-left: 7px; overflow: hidden; }
      .searchbar .lfield input { font-style: italic; color: #8b99a8; float: left; height: 15px; width: 180px; border: 0 none; background: none; margin-top: 6px; }
   
    .searchbar .lbtn input { width: 30px; height: 26px; background: #db143d url("../images/search.png") no-repeat 0 -26px; }
      .searchbar .lbtn input:hover { background-position: -30px -26px; }

Дальше, если слайдер у тебя остается, то ищи ниже ещё такой код:
Цитировать
/*---Slider---*/
#slides, .slides_container { height: 278px; position: relative; }
.slides_container { background: url("../images/loading.gif") no-repeat 50% 50%; border-bottom: 1px solid #b31032; width: 100%; overflow:hidden; }
#slides { border-bottom: 8px solid #db143d; margin-bottom: 7px; }
   #slides .next, #slides .prev { position: absolute; top: 114px; width: 50px; padding-top: 60px; display: block; z-index: 101; background: url("../images/nextprev.png"); }
   #slides .next { background-position: 0 0; left: -23px; }   #slides .next:hover { background-position: 0 -60px; }
   #slides .prev { background-position: -50px 0; right: -23px; }   #slides .prev:hover { background-position: -50px -60px; }
Заменяй на этот:
Цитировать
/*---Slider---*/
#slides * { z-index: 10;}
#slides, .slides_container { height: 220px; position: relative;}
.slides_container { background: url("../images/loading.gif") no-repeat 50% 50%; border-bottom: 1px solid #b31032; width: 100%; overflow:hidden; }
#slides { border-bottom: 8px solid #db143d; margin-bottom: 7px; z-index: 10;}
  #slides .next, #slides .prev { position: absolute; top: 114px; width: 50px; padding-top: 60px; display: block; z-index: 101; background: url("../images/nextprev.png"); }
  #slides .next { background-position: 0 0; left: -23px; }  #slides .next:hover { background-position: 0 -60px; }
  #slides .prev { background-position: -50px 0; right: -23px; }  #slides .prev:hover { background-position: -50px -60px; }


P.S. Если пишу с ошибками, проши узвиняйте, клава тупит просто :)
« Последнее редактирование: 15 Апреля 2013, 13:55:35 от BAKS1K »

Оффлайн cxem

  • Кандидат
  • *
  • Сообщений: 22
  • Репутация: 6
спасибо огромное все заработало)  thanks еще раз спасибо за хороший ответ)
http://chenilo.ru Все для радиолюбителя!

Оффлайн Serega2300

  • Новичок
  • Сообщений: 1
  • Репутация: 0
Вот ссылка:
В точности такое же меню, щас у нах вырезал из кода.
CSS код для того чтобы работало правильно. Найти такой код в style.css:И заменить полностью на это:Вроде должно работать. :D
можете перезалить файл пожалуйста?

Оффлайн BAKS1K

  • Постоялец
  • ***
  • Сообщений: 172
  • Репутация: 7
  • Пол: Мужской
    • Создай Свой Игровой Сервер с www.valve-server.ru
можете перезалить файл пожалуйста?
К сожалению у меня этого уже нет. Попробуйте обратиться к создателю темы, может он вам поможет