Как сделать такое меню

@sendxt · Регистрация: 25.04.2012

Author24 — интернет-сервис помощи студентам

Такое без яваскрипта осуществимо? Если кому не трудно набросайте шаблон пожайлуста такой менюшки.

@Vladislav WebDev · 01.05.2014, 11:09

Сообщение от sendxt

Такое без яваскрипта осуществимо?

Конечно! Набросал по-бырику вам примерчик http://jsbin.com/wepevate/1/

HTML5

<ul class="first">
  <li>
    <p>some li</p>
    <ul class="second">
      <li>some other li</li>
      <li>some other li</li>
      <li>some other li</li>
    </ul>
  </li>
  <li>some li</li>
  <li>some li</li>
</ul>

CSS

* {
  margin: 0;
  padding: 0;
  list-style: none;
}
 
.first > li {
  width: 100px;
  height: 50px;
  float: left;
  background: #ccc;
  border-right: 1px solid;
  position: relative;
}
 
.first > li:first-child {
  border-left: 1px solid;
}
 
.first > li:hover {
  background: #098;
}
 
.second {
  width: 100%;
  background: #777;
  color: #fff;
  display: none;
  position: absolute;
  top: 50px;
}
 
.second > li {
  height: 50px;
}
 
.second > li:hover {
  background: #ccc;
  color: #000;
}
 
.first > li:hover .second {
  display: block;
}

@sendxt · 01.05.2014, 11:21 **[ТС]**

Suby, можно ещё по теме списков вопрос? есть менюшка, я задаю ширину в процентах 100/7 = 14,.. %
2 элемента из менюхи не влазят в эти 14% , я им задал класс и попытался всем уменьшим сколько можно а этим двум увеличить не срабатываю стили, как быть в таких ситуациях?

HTML5

<ul class="header-menu">
    <li><a href="#">Kirpykla</a></li>
    <li class="menu-item"><a href="#">Kosmetologijos paslaugos</a></li>
    <li><a href="#">Makiažas</a></li>
    <li class="menu-item"><a href="#">Manikiūras - Pedikiūras</a></li>
    <li><a href="#">Masažai</a></li>
    <li><a href="#">Apie studiją</a></li>
    <li><a href="#">Kontaktai</a></li>
</ul>

@Vladislav WebDev · 01.05.2014, 11:27

Сообщение от sendxt

2 элемента из менюхи не влазят в эти 14%

Тут либо шрифты уменьшать, либо подгонять размеры элементов списка, либо оставлять как есть - с переносами слов на другую строчку. Если я вас правильно понял)

@sendxt · 01.05.2014, 11:32 **[ТС]**

Suby, правильно, только почему-то разные размеры задать отдельным эл. не получается.
делаю так и все работают как 13%

CSS

.header-menu {
width:13%;
}
 
.menu-item {
width:16%;
}

@Vladislav WebDev · 01.05.2014, 11:57

Сообщение от sendxt

делаю так и все работают как 13%

Потому-что вы задаете размеры разным елементам. 13 - ul, 16 - li

@sendxt · 01.05.2014, 12:13 **[ТС]**

Suby, не так написал указывал делал header-menu li 13 и потом уже тем которые с классом строки и срабатывал для всех 13

@sendxt 11 / 11 / 13 Регистрация: 25.04.2012 Сообщений: 1,157
		1
	Как сделать такое меню 01.05.2014, 10:46. Показов 594. Ответов 6 Метки нет (Все метки) Такое без яваскрипта осуществимо? Если кому не трудно набросайте шаблон пожайлуста такой менюшки. Миниатюры 0

@Vladislav WebDev 327 / 217 / 97 Регистрация: 04.11.2012 Сообщений: 638
	01.05.2014, 11:27	4
	Сообщение от sendxt 2 элемента из менюхи не влазят в эти 14% Тут либо шрифты уменьшать, либо подгонять размеры элементов списка, либо оставлять как есть - с переносами слов на другую строчку. Если я вас правильно понял) 0

@Vladislav WebDev 327 / 217 / 97 Регистрация: 04.11.2012 Сообщений: 638
	01.05.2014, 11:57	6
	Сообщение от sendxt делаю так и все работают как 13% Потому-что вы задаете размеры разным елементам. 13 - ul, 16 - li 0

@sendxt 11 / 11 / 13 Регистрация: 25.04.2012 Сообщений: 1,157
	01.05.2014, 12:13 [ТС]	7
	Suby, не так написал указывал делал header-menu li 13 и потом уже тем которые с классом строки и срабатывал для всех 13 0

Опции темы