Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.10.2015, 13:37
Новичок на форуме
Отправить личное сообщение для gorbuz9kin Посмотреть профиль Найти все сообщения от gorbuz9kin
 
Регистрация: 24.10.2015
Сообщений: 8

Выпадающий список по клику
Добрый день!

Делаю сайт, в котором есть несколько выпадающих списков в хедере:
1. список с выбором языка;
2. список с выбором валюты (денежной единицы отображения стоимости товара);
3. список с выбором телефона службы поддержки, в зависимости от региона/города/страны;

Все списки выпадают по клику. Вариантов верстки подобных списков в просторах интернета достаточно: от банального select (option) до создания обыкновенного ненумерованного списка ul>li и "прикручивания" к нему JS.

Вопрос в том как "правильно" делаются/верстаются подобные списки?
Ответить с цитированием
  #2 (permalink)  
Старый 24.10.2015, 13:42
Профессор
Отправить личное сообщение для Decode Посмотреть профиль Найти все сообщения от Decode
 
Регистрация: 31.01.2015
Сообщений: 576

Select
Ответить с цитированием
  #3 (permalink)  
Старый 24.10.2015, 16:25
Аватар для EmperioAf
Профессор
Отправить личное сообщение для EmperioAf Посмотреть профиль Найти все сообщения от EmperioAf
 
Регистрация: 15.01.2015
Сообщений: 622

Сообщение от gorbuz9kin
Вопрос в том как "правильно" делаются/верстаются подобные списки?
если содержимое в вариантах выпадающего списка большое, то обычный <select> плоховат, ибо в нём нет встроенного переноса и его вроде бы нельзя никак добавить. Т.е. вот такое выглядит не очень:
<select name="" id="">
  <option value="pravo">Гражданское право — отрасль права, объединяющая правовые нормы, регулирующие имущественные, а также связанные и не связанные с ними личные неимущественные отношения, которые основаны на независимости оценки, имущественной самостоятельности и юридическом равенстве сторон, в целях создания наиболее благоприятных условий
  </option>
</select>


В остальных случаях выбирают select
Ответить с цитированием
  #4 (permalink)  
Старый 24.10.2015, 18:53
Новичок на форуме
Отправить личное сообщение для gorbuz9kin Посмотреть профиль Найти все сообщения от gorbuz9kin
 
Регистрация: 24.10.2015
Сообщений: 8

ок. а как тогда варианту option прикрепить картинку/иконку, ссылку?
Ответить с цитированием
  #5 (permalink)  
Старый 25.10.2015, 11:01
Новичок на форуме
Отправить личное сообщение для gorbuz9kin Посмотреть профиль Найти все сообщения от gorbuz9kin
 
Регистрация: 24.10.2015
Сообщений: 8

В общем, сделал через ul>li. подскажите как передать значение пункта li при клике на него в span class="title" ?
http://jsfiddle.net/gorbuz9kin/m7gxk5s4/
Ответить с цитированием
  #6 (permalink)  
Старый 25.10.2015, 12:14
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

кастомизация селекта на js+ сворачивание по клику вне селекта
gorbuz9kin,

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo by gorbuz9kin</title>
  <style type='text/css'>
    .dropdown-menu ul {
  margin: 0;
  padding: 0;
  width: 135px;
  list-style: none;
  display: none;

}
.dropdown-menu ul li {
    background: #0085b6;
    height: 35px;
}
.dropdown-menu ul li:hover {
    background: #1d9fcb;
}
.dropdown-menu ul li a {
  display: block;
  width: 100%;
  padding: 5px 35px;
  text-decoration: none;
    font-size: 15px;
    color: #fff;
}
.dropdown-menu ul li:first-child a {
    background: url(img/flag_english_active.png) no-repeat 5px center;
}
.dropdown-menu ul li:nth-child(2) a {
    background: url(img/flag_russion.png) no-repeat 5px center;
}
.dropdown-menu ul li:last-child a {
    background: url(img/flag_ukraine.png) no-repeat 5px center;
}

.dropdown-menu .title {
    display: inline-block;
    width: 80px;
    height: 20px;
    padding: 5px 0  5px 35px;
    font-size: 15px;
    line-height: 20px;
    cursor: pointer;
    background: #eaecf0 url(img/flag_english.png) no-repeat 5px center;
}

.dropdown-menu .title::after {
  content: "";
  float: right;
  display: block;
  background: url(img/arrow_down.png) no-repeat 10px center;
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

.dropdown-menu.open .title {
  background: #0085b6 url(img/flag_english_active.png) no-repeat 5px center;
  color: #fff;
  border-bottom: 4px solid #1d9fcb;
}

.dropdown-menu.open .title::after {
  background: url(img/arrow_up.png) no-repeat 10px center;
}

.dropdown-menu.open ul {
  display: block;
}
  </style>




<script>
window.onload=function(){
var menuElem = document.getElementById('dropdown-menu'),
    titleElem = menuElem.querySelector('.title');
    document.onclick = function(event) {
    var target = elem = event.target;
    while (target != this) {
          if (target == menuElem) {
          if(elem.tagName == 'A') titleElem.innerHTML = elem.textContent;
          menuElem.classList.toggle('open')
              return;
          }
          target = target.parentNode;
      }
    menuElem.classList.remove('open');
}
}
</script>

</head>
<body>
  <div id="dropdown-menu" class="dropdown-menu">
  <span class="title">English</span>
  <ul>
    <li><a href="#">English</a></li>
    <li><a href="#">Русский</a></li>
    <li><a href="#">Украинский</a></li>
 </ul>
</div>

</body>

</html>

Последний раз редактировалось рони, 25.10.2015 в 12:39.
Ответить с цитированием
  #7 (permalink)  
Старый 25.10.2015, 20:24
Новичок на форуме
Отправить личное сообщение для gorbuz9kin Посмотреть профиль Найти все сообщения от gorbuz9kin
 
Регистрация: 24.10.2015
Сообщений: 8

Спасибо огромное!
А если у каждого пункта li есть своя фоновая (background-image) картинка (в данном случае это флаг), как сделать так чтобы эта картинка "подтягивалась" в title при выборе определенного <li>
Ответить с цитированием
  #8 (permalink)  
Старый 25.10.2015, 20:30
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

gorbuz9kin,
добавить class или data в ссылку и добавить в строку 87 изменение класса или стиля
Ответить с цитированием
  #9 (permalink)  
Старый 25.10.2015, 20:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

gorbuz9kin,
<li><a href="#"  data-img="img/flag_english_active.png">English</a></li>

if(elem.tagName == 'A') {
            titleElem.innerHTML = elem.textContent;
            var url = elem.dataset.img;
            titleElem.style.backgroundImage = 'url('+url+')'
          }
Ответить с цитированием
  #10 (permalink)  
Старый 25.10.2015, 21:14
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

gorbuz9kin,
или просто взять стиль backgroundImage из самой ссылки
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo by gorbuz9kin</title>
  <style type='text/css'>
    .dropdown-menu ul {
  margin: 0;
  padding: 0;
  width: 135px;
  list-style: none;
  display: none;

}
.dropdown-menu ul li {
    background: #0085b6;
    height: 35px;
}
.dropdown-menu ul li:hover {
    background: #1d9fcb;
}
.dropdown-menu ul li a {
  display: block;
  width: 100%;
  padding: 5px 35px;
  text-decoration: none;
    font-size: 15px;
    color: #fff;
}
.dropdown-menu ul li:first-child a {
    background: url(http://abali.ru/wp-content/uploads/2010/12/united-kingdom-flag-16x16.png) no-repeat 5px center;
}
.dropdown-menu ul li:nth-child(2) a {
    background: url(http://abali.ru/wp-content/uploads/2010/12/russia-flag-16x16.png) no-repeat 5px center;
}
.dropdown-menu ul li:last-child a {
    background: url(http://abali.ru/wp-content/uploads/2010/12/ukraine-flag-16x16.png) no-repeat 5px center;
}

.dropdown-menu .title {
    display: inline-block;
    width: 80px;
    height: 20px;
    padding: 5px 0  5px 35px;
    font-size: 15px;
    line-height: 20px;
    cursor: pointer;
    background: #eaecf0 url(http://abali.ru/wp-content/uploads/2010/12/united-kingdom-flag-16x16.png) no-repeat 5px center;
}

.dropdown-menu .title::after {
  content: "";
  float: right;
  display: block;
  background: url(img/arrow_down.png) no-repeat 10px center;
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

.dropdown-menu.open .title {
  background: #0085b6 url(img/flag_english_active.png) no-repeat 5px center;
  color: #fff;
  border-bottom: 4px solid #1d9fcb;
}

.dropdown-menu.open .title::after {
  background: url(img/arrow_up.png) no-repeat 10px center;
}

.dropdown-menu.open ul {
  display: block;
}
  </style>




<script>
window.onload=function(){
var menuElem = document.getElementById('dropdown-menu'),
    titleElem = menuElem.querySelector('.title');
    document.onclick = function(event) {
    var target = elem = event.target;
    while (target != this) {
          if (target == menuElem) {
          if(elem.tagName == 'A') {
            titleElem.innerHTML = elem.textContent;
            titleElem.style.backgroundImage =  getComputedStyle(elem, null)['backgroundImage']
          }
          menuElem.classList.toggle('open')
              return;
          }
          target = target.parentNode;
      }
    menuElem.classList.remove('open');
}
}
</script>

</head>
<body>
  <div id="dropdown-menu" class="dropdown-menu">
  <span class="title">English</span>
  <ul>
    <li><a href="#">English</a></li>
    <li><a href="#">Русский</a></li>
    <li><a href="#">Украинский</a></li>
 </ul>
</div>

</body>

</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Выпадающий список без кнопок-стрелок для открытия vertmann (X)HTML/CSS 8 15.11.2013 11:43
Ext.form.ComboBox, как принудительно обнулить выпадающий список? martinelli ExtJS 4 10.07.2012 12:23
Autocomplete + выпадающий список yarnik jQuery 0 08.03.2012 15:20
Выпадающий список не помещается в div'е LA_ Элементы интерфейса 5 01.11.2010 10:43
Выпадающий список с возможностью ввода текста LA_ Элементы интерфейса 6 27.10.2010 16:30