• Страница 1 из 1
  • 1
Модератор форума: JonMagon  
Сообщество uCoz » Вебмастеру » JavaScript, Flash и прочие технологии » Как стилизовать выпадающий список?
Как стилизовать выпадающий список?
Helena_Helga
Сообщений: 138
Репутация: 41

Сообщение # 1 | 17:28:56
Всем доброго времени суток! Хотела бы получить консультацию у специалистов smile к сожалению в JavaScript я не очень то соображаю, а вот понадобилось такую проблему решить:

создала на сайте вот такой выпадающий список:

Цитата
<select name="Affiliates" onchange="top.location = this.options[this.selectedIndex].value">

<option value="">- Полный список -</option>
<option value=""> </option>
<option value="http://..">....</option></select>


Работает он прекрасно, частично даже прописала в css вид select

Цитата
select {
background: none repeat scroll 0% 0% rgb(25, 26, 32);
border: 0px none;

font-style:oblique;
text-align: center;
color: rgb(255, 255, 255);
padding: 5px;
border-radius: 2px 2px 2px 2px;
vertical-align: middle;
font-size: 8pt;
font-family: verdana,arial,helvetica;
}


Попыталась прописать в сss option (ну не вписывается он в дизайн сайта никак!), но не тут то было! Единственное решение проблемы (насколько я поняла) возможно только при подключении JavaScript. Стала искать подходящий скрипт в инете, нашла несколько вариантов, вот в частности здесь - http://www.webmasters.by/article....byuKTW, стала пытаться Первый пример установить на сайт - не получается. Может быть кто-нибудь объяснит, собственно что и куда надо устанавливать - к примеру где должен прописан быть JavaScript? Что надо в СSS прописать? Хотя бы на одном из представленных мною примеров sad
Сообщение отредактировал Helena_Helga - Суббота, 29 Дек 2012, 17:29:39
Komoff
Сообщений: 595
Репутация: 276

Сообщение # 2 | 00:08:00
В примере используется не select, а ul, это большая разница.
Helena_Helga
Сообщений: 138
Репутация: 41

Сообщение # 3 | 07:29:59
Цитата (Komoff)
В примере используется не select, а ul, это большая разница.

Ну это я поняла, я как раз о том, что мой вариант нельзя полностью переделать под себя, вот я и спрашиваю, как реализовать к примеру Первый вариант? как подключить скрипт? Что куда надо вставить? И в каком виде?
fflesh
Сообщений: 1784
Репутация: 1314

Сообщение # 4 | 08:33:10
Helena_Helga,
Цитата (Helena_Helga)
Ну это я поняла, я как раз о том, что мой вариант нельзя полностью переделать под себя

Сорь что влезаю, но почему вы считаете что нельзя?
У вас же самописный список - как напишите - так и будет и совершенно не обязательно использовать селект и оптион.
Просто дописать переход по ссылке на выбранном элементе.
Типа: _http://likbezz.ru/_example/jquery/drop-down/drop-down-list/drop-down-list_v1.html

Всё написанное выше - моё личное мнение и на абсолютную правоту не претендует.
Есть вопросы лично ко мне - пиши сюда: http://likbezz.ru/forum/8
Сообщение отредактировал fflesh - Воскресенье, 30 Дек 2012, 09:27:46
Helena_Helga
Сообщений: 138
Репутация: 41

Сообщение # 5 | 10:29:39
Цитата (fflesh)
Сорь что влезаю, но почему вы считаете что нельзя?

Я только рада любым советам smile
Цитата (fflesh)
У вас же самописный список - как напишите - так и будет и совершенно не обязательно использовать селект и оптион.

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

Цитата
<div class="wrapper-demo">
<div id="dd" class="wrapper-dropdown-2" tabindex="1">Регистрация в
<ul class="dropdown">
<li><a href="#"><i class="icon-twitter icon-large"></i>Twitter</a></li>
<li><a href="#"><i class="icon-github icon-large"></i>Github</a></li>
<li><a href="#"><i class="icon-facebook icon-large"></i>Facebook</a></li>
</ul>
</div>
</div>


Это стили:

Цитата
ul.dropdown{ margin:0; padding:0;}
.wrapper-dropdown-2{position:relative;width:200px;background:#E7E7E7;border-left:5px solid grey;cursor:pointer;outline:none;margin:0 auto;padding:10px 15px;}
.wrapper-dropdown-2:after{content:"";width:0;height:0;position:absolute;right:16px;top:50%;margin-top:-3px;border-color:grey transparent;border-style:solid;border-width:6px 6px 0;}
.wrapper-dropdown-2 .dropdown{position:absolute;top:100%;left:-5px;right:0;background:#F4F4F4;list-style:none;opacity:0;}
.wrapper-dropdown-2 .dropdown li a{display:block;text-decoration:none;color:#333;border-left:5px solid;padding:10px;}
.wrapper-dropdown-2 .dropdown li:nth-child(1) a{border-left-color:#00ACED;}
.wrapper-dropdown-2 .dropdown li:nth-child(2) a{border-left-color:#4183C4;}
.wrapper-dropdown-2 .dropdown li:nth-child(3) a{border-left-color:#3B5998;}
.wrapper-dropdown-2 .dropdown li i{margin-right:5px;color:inherit;vertical-align:middle;}
.wrapper-dropdown-2 .dropdown li:hover a{color:grey;background:#E7E7E7;}
.wrapper-dropdown-2.active:after{border-width:0 6px 6px;}
.wrapper-dropdown-2.active .dropdown{opacity:1;}
.no-opacity .wrapper-dropdown-2 .dropdown,.no-pointerevents .wrapper-dropdown-2 .dropdown{display:none;opacity:1;}
.no-opacity .wrapper-dropdown-2.active .dropdown,.no-pointerevents .wrapper-dropdown-2.active .dropdown{display:block;}


Но наверное же они в css не так прописаны ясное дело?

И самое главное, как это все скриптом обернуть?

Вобщем нужен наглядный пример кодом что и куда и как ставить wacko
Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 6 | 10:34:41
Helena_Helga,
Кратко что хотите сделать ???

Сообщение отредактировал Miss_Esq - Воскресенье, 30 Дек 2012, 10:38:06
fflesh
Сообщений: 1784
Репутация: 1314

Сообщение # 7 | 10:48:17
Helena_Helga,
Цитата (Helena_Helga)
Вобщем нужен наглядный пример кодом что и куда и как ставить

Наглядный пример по ссылке постом выше.
В вашем списке, насколько мне понятно из фрагмента года, что вы предоставили, происходит переход по ссылке из оптиона.
Следовательно:
Код
<div id="dd" class="wrapper-dropdown-2" tabindex="1">Регистрация в
<ul class="dropdown">
<li><a href="#"><i class="icon-twitter icon-large"></i>Twitter</a></li>
<li><a href="#"><i class="icon-github icon-large"></i>Github</a></li>
<li><a href="#"><i class="icon-facebook icon-large"></i>Facebook</a></li>
</ul>
</div>

Вместо:
Код
<li><a href="#"><i class="icon-twitter icon-large"></i>Twitter</a></li>

Ваша ссылка:
Код
<li><a href="http://forum.ucoz.ru/forum/38-46145-1">Куда ссылка</a></li>

..
Остальное - копировать/вставить.

Всё написанное выше - моё личное мнение и на абсолютную правоту не претендует.
Есть вопросы лично ко мне - пиши сюда: http://likbezz.ru/forum/8
Сообщение отредактировал fflesh - Воскресенье, 30 Дек 2012, 10:50:09
Komoff
Сообщений: 595
Репутация: 276

Сообщение # 8 | 11:08:32
Цитата (Helena_Helga)
И самое главное, как это все скриптом обернуть?
первый пример с выбором пола, но из примера сможешь понять как их "обернуть", CSS можешь добавить в Таблицу стилей сайта, или можешь вообще все прям так вставлять.

Сообщение отредактировал Komoff - Воскресенье, 30 Дек 2012, 11:16:17
Helena_Helga
Сообщений: 138
Репутация: 41

Сообщение # 9 | 11:29:25
Miss_Esq, рассказываю, на своем сайте - http://ben-barnes.ru/ в блоке "Наши друзья" поставила выпадающий список. В принципе смотрится он ничего так, да вот только когда открывается, голубой цвет неэстетично выглядит wacko Я решила эту неэстетичность прописать в стилях, НО! как оказалось - option не прописывается обычным способом в css, надо подключать скрипт либо использовать вариант без select и option (я уже к этому варианту и склоняюсь), но я не знаю куда:

Цитата (fflesh)
Остальное - копировать/вставить.


Обычно то я скрипты уже готовые вставляю из инета и там, где их беру, уже расписано, что к примеру это ставите в css, это в код шаблона. И , как я уже написала fflesh, мне бы наглядный пример такого рода:

это ставим в сss
это ставим в шаблон

Добавлено (30 Дек 2012, 11:25:41)
---------------------------------------------
Komoff, будем пробовать biggrin

Добавлено (30 Дек 2012, 11:29:25)
---------------------------------------------

Цитата (Komoff)
первый пример с выбором пола, но из примера сможешь понять как их "обернуть", CSS можешь добавить в Таблицу стилей сайта, или можешь вообще все прям так вставлять.

упорно не хошет вставляться, ни то, ни другое wacko
fflesh
Сообщений: 1784
Репутация: 1314

Сообщение # 10 | 11:34:19
Helena_Helga,
Цитата (Helena_Helga)
Обычно то я скрипты уже готовые вставляю из инета

..опасное это занятие, скажу я вам )

Цитата (Helena_Helga)
это ставим в сss

Это ставим в css^
Код
ul.dropdown,ul.dropdown li{margin:0;padding:0;list-style:none;}
.wrapper-dropdown-2{position:relative;width:200px;background:#E7E7E7;border-left:5px solid grey;cursor:pointer;outline:none;margin:0 auto;padding:10px 15px;}
.wrapper-dropdown-2:after{content:"";width:0;height:0;position:absolute;right:16px;top:50%;margin-top:-3px;border-color:grey transparent;border-style:solid;border-width:6px 6px 0;}
.wrapper-dropdown-2 .dropdown{position:absolute;top:100%;left:-5px;right:0;background:#F4F4F4;list-style:none;opacity:0;display:none;}
.wrapper-dropdown-2 .dropdown li a{display:block;text-decoration:none;color:#333;border-left:5px solid;padding:10px;}
.wrapper-dropdown-2 .dropdown li:nth-child(1) a{border-left-color:#00ACED;}
.wrapper-dropdown-2 .dropdown li:nth-child(2) a{border-left-color:#4183C4;}
.wrapper-dropdown-2 .dropdown li:nth-child(3) a{border-left-color:#3B5998;}
.wrapper-dropdown-2 .dropdown li:hover a{color:grey;background:#E7E7E7;}
.wrapper-dropdown-2.active:after{border-width:0 6px 6px;}
.wrapper-dropdown-2.active .dropdown{opacity:1;display:block;}


Цитата (Helena_Helga)
это ставим в шаблон

А это ставим в шаблон:
Код
<div id="dd" class="wrapper-dropdown-2" tabindex="1">Регистрация в      
         <ul class="dropdown">
           <li><a href="http://forum.ucoz.ru/">Сообщество юКоз</a></li>
           <li><a href="http://likbezz.ru/forum/">Форум аццкого кодера</a></li>
         </ul>
</div>
<script type="text/javascript">
$('#dd').click(function(e){
      $(this).toggleClass('active');
      (e.stopPropagation)?e.stopPropagation():e.cancelBubble=true;
      $(document).click(function(){
       $('#dd').removeClass('active');
       $(document).unbind();
      });
});
</script>

Сохраняем.
_http://likbezz.ru/_example/jquery/drop-down/drop-down-list/drop-down-list_v2.html

Всё написанное выше - моё личное мнение и на абсолютную правоту не претендует.
Есть вопросы лично ко мне - пиши сюда: http://likbezz.ru/forum/8
Сообщение отредактировал fflesh - Воскресенье, 30 Дек 2012, 14:36:54
Komoff
Сообщений: 595
Репутация: 276

Сообщение # 11 | 11:58:24
Цитата (Helena_Helga)
упорно не хошет вставляться, ни то, ни другое
а потому что пример не полностью скопировал, там ещё по сути нужно добавить в стили
Код
*,
*:after,
*:before {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
     padding: 0;
     margin: 0;
}
и ещё фиг знает что.))
Helena_Helga
Сообщений: 138
Репутация: 41

Сообщение # 12 | 14:25:16
fflesh, провела эксперимент на пробном сайте - http://proba245.ucoz.ru/

Не сдается wacko та же история
fflesh
Сообщений: 1784
Репутация: 1314

Сообщение # 13 | 14:37:27
Helena_Helga,
Цитата (Helena_Helga)
Не сдается wacko та же история

Скрипт замените - у вас там две лишние точки с запятой:
Код
<script type="text/javascript">
$('#dd').click(function(e){
      $(this).toggleClass('active');
      (e.stopPropagation)?e.stopPropagation():e.cancelBubble=true;
      $(document).click(function(){
       $('#dd').removeClass('active');
       $(document).unbind();
      });
});
</script>

Всё написанное выше - моё личное мнение и на абсолютную правоту не претендует.
Есть вопросы лично ко мне - пиши сюда: http://likbezz.ru/forum/8
Helena_Helga
Сообщений: 138
Репутация: 41

Сообщение # 14 | 16:47:30
fflesh, все получилось biggrin Большое спасибо!

Последний вопросик:

Цитата
<script type="text/javascript">
....
</script>


Я правильно понимаю - это как раз и означает выполнение скрипта? Его начало и конец? Т.е. если у меня в просто такое дается:

Цитата
$('#dd').click(function(e){
$(this).toggleClass('active');
(e.stopPropagation)?e.stopPropagation():e.cancelBubble=true;
$(document).click(function(){
$('#dd').removeClass('active');


Мне необходимо обернуть этим:

Цитата
<script type="text/javascript">
....
</script>
Сообщество uCoz » Вебмастеру » JavaScript, Flash и прочие технологии » Как стилизовать выпадающий список?
  • Страница 1 из 1
  • 1
Поиск: