0

Суть проблемы в следующем. Мне нужна языковая панелька, её обязательно верстать с помощью select>option? Или можно сделать просто списком? Если можно с помощью списка, то как вам мой вариант? Я уже пометил комментарием в коде, что блок .wrap-wrap мне нужен для позиционирования span-a и ul по центру по вертикали, но из этого вытекла вторая проблема, как сделать так, чтобы при наведении именно на ul блок .wrap-wrap получал свойство overflow: visible; ? Вообщем, буду рад услышать варианты!

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


li{
  list-style: none;
}

.wrapper{
  width: 100%;
  height: 50px;
  background-color: #444;
  position: relative;
}


/*wrap-wrap для позиционирования блока language и ul по центрну родительского */

.wrap-wrap{
  position: absolute;
  height: 27px;
  top:50%;
  transform: translate(0, -50%);
  border: 1px solid #fff;
  overflow: hidden;
}

.wrapper span, .wrapper ul{
  display: inline-block;
  background-color: red;
  vertical-align: top;
  padding: 3px 5px;
  color: #fff;
  line-height: 20px;
}


.wrapper ul{
  padding-right: 30px;
}

.wrap-wrap ul li:hover .wrap-wrap{
  overflow: visible;
}
<div class="wrapper">
  <div class="wrap-wrap">
      <span>Language : </span>
        <ul>
            <li>English</li>
            <li>Deutch</li>
            <li>Russian</li>
          </ul>
   </div>
</div>

4
  • В настоящее время нет способа выбрать родительский элемент элемента в CSS. Тут либо что-то менять, либо на js делать
    – InDevX
    Commented 8 апр. 2019 в 11:33
  • на jquery пример -> jsfiddle.net/kLw41g92
    – InDevX
    Commented 8 апр. 2019 в 11:39
  • Ок, но ответа на главный вопрос я так и не услышал. Меня интересовало, стоит ли вообще делать языковую панель с помощью ul? А через жс получается можно навешать событие на клик по ul , чтобы изменилось свойство overflow у родителя?
    – Muranx
    Commented 8 апр. 2019 в 23:33
  • можно, никто этого не запрещает... но я бы не советовал так делать
    – InDevX
    Commented 9 апр. 2019 в 7:18

1 ответ 1

1

На самом деле, как я понял вопрос - да, Вы можете так верстать списки, и более того, как правило их так и верстают. Я написал для Вас код-список, который раскрывается при наведении мыши и скрывается, когда курсор уходит. Я так же написал условие, что если в списке будет больше 10 li, то высота установится в 200px и overflow:auto. Если необходимо отправить выбранный вариант на почту или куда-то, то используйте вместо output -> input. Ну и конечно же со стилями я мало баловался. Просто пример, чтобы повысили знания. Успехов, друг!

let output = document.querySelector('.wrap-wrap output'),
	li = document.querySelectorAll('.wrap-wrap li'),
	ul = document.querySelector('.wrap-wrap ul');

output.innerHTML = li[0].innerHTML;

	ul.onmouseover = function(){
		ul.style.height = (40 * li.length) + 40 + 'px';
		if(li.length >= 10){
			ul.setAttribute('style', 'height: 200px; overflow: auto;');
		}
	}
	ul.onmouseout = function(){
		ul.removeAttribute('style');
	}

	li.forEach(function(e){
		let text = e.innerHTML;
		e.addEventListener('click', function(){
			output.innerHTML = text;
		})
		
	})
* {
  box-sizing: border-box;
  margin: 0; padding: 0;
	list-style: none;
}

.wrap-wrap {
	display: flex;
}
.wrap-wrap span, .wrap-wrap li, .wrap-wrap output {
	display: block;
	padding: 0 10px;
	height: 40px; line-height: 40px;
	border: 1px solid #000;
}
.wrap-wrap input {
	height: 40px;
	background: none;
	padding: 0 10px;
	border: 0; outline: 0;
	border: 1px solid #000;
}
.wrap-wrap ul {
	margin-left: 10px;
	height: 40px;
  transition: 375ms;
  cursor: default;
	overflow: hidden;
}
<section class="wrapper">
  <article class="wrap-wrap">
      <span>Language:</span>
        <ul>
			<output></output>
            <li>English</li>
            <li>Deutch</li>
            <li>Russian</li>
         </ul>
   </article>
</section>

9
  • прикольно! плюс Вам :) я бы только ещё добавил ul.removeAttribute('style'); в функцию клика по li - так будет органичнее Commented 9 апр. 2019 в 13:39
  • Спасибо, делюсь знаниями. Если удалять стайл по клику, тогда не вижу смысла в onmouseout. Думаю ТС сам уже поправит) Commented 9 апр. 2019 в 13:41
  • ну как же? а если пользователь навёл курсор, а потом передумал - список так и останется висеть раскрытым? так что смысл в onmouseout прямой Commented 9 апр. 2019 в 13:43
  • @humster_spb почему же? Там же функция на onmouseout удалить style=) Можете посмотреть нажав "выполнить код". Commented 9 апр. 2019 в 13:45
  • так Вы же сами пишете "Если удалять стайл по клику, тогда не вижу смысла в onmouseout". я Вам объясняю, в чём смысл - и того, и другого :)) Commented 9 апр. 2019 в 13:47

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.