Перейти к содержимому

Фотография
- - - - -

Выпадающие горизонтальные подменю


  • Вы не можете создать новую тему
  • Авторизуйтесь для ответа в теме
Сообщений в теме: 30

#1 clean-nt

clean-nt

    Прохожий

    Топикстартер
  • Участник
  • 1
    19 сообщ.

Отправлено 07 Ноябрь 2018 в 11:07

Здравствуйте!

 

Подскажите, пожалуйста, как правильно написать код css, чтобы при наведении на ссылку "Услуги", далее на "Разработка" ссылки "Продвижение" и "Контекст" оставались на своих позициях, а под ссылкой "Разработка" появлялось горизонтальное подменю "Дизайн" и "Сайт"?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru-RU"><head><style></style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Включаем механизм выпадания</title>
    <link rel="shortcut icon" href="/favicon.ico" />
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
    
<style>

body {
    min-width: 300px;
    padding: 10px;
    font-family: Arial, sans-serif;
    font-size: 14px;
}

.main-menu {
    background-color: #E64A19;
    margin: 0;
    padding: 0;
    width: 580px;
    list-style: none;
    border: 10px solid #E5E5E5;
}

.main-menu > li {
    display: inline-block;
    margin-right: -4px;
    position: relative;
}

.main-menu a {
    display: block;
    padding: 8px 10px;
    color: #fff;
    border-left: 1px solid #E5E5E5;
    text-decoration:none;
}

.main-menu a:hover {
    background: #f5f5f5;
    color: #000;
}

.main-menu .sub-menu {
    position: absolute;
    left: 1px;
    width: 283px;
    margin: 0;
    padding: 0;
    list-style: none;
    background: #FCF8E3;
    display:none;
}

.main-menu .sub-menu a {
    margin-right: -4px;
    border: 1px solid #E5E5E5;
}

.main-menu > li:hover .sub-menu {
    display:block;
}

.sub-menu > li {
    display:inline-block;
    background-color: #E64A19;
}    

.pod-menu {
    display:none;
}

.sub-menu > li:hover .pod-menu {
    display:block;
}

.pod-menu > li {
    display:inline-block;
    background-color: #E64A19;
    position: relative;
}

</style>
    
<body>    
    <ul class="main-menu">
            <li><a href="#company">О компании</a></li>
            <li>
                <a href="#services">Услуги</a>
                <ul class="sub-menu">
                    <li><a href="#1">Разработка</a>
                       <ul class="pod-menu">
                         <li><a href="#5">Дизайн</a></li>
                         <li><a href="#5">Сайт</a></li>
                       </ul>
                    </li>
                    <li><a href="#2">Продвижение</a></li>
                    <li><a href="#3">Контекст</a></li>
                </ul>
            </li>
            <li><a href="#team">Сотрудники</a></li>
        </ul>
</body>
</html>

Спасибо


Сообщение отредактировал clean-nt: 07 Ноябрь 2018 в 11:10

  • 0

Спонсор

#2 BaNru

BaNru

    Пацифизжу

  • суперМодератор
  • 1018
    3 733 сообщ.

Отправлено 07 Ноябрь 2018 в 18:55

Точно также, как и для второго уровня: для третьего уровня .pod-menu добавить position: absolute;
Чтобы было в строку - надо применять своего рода хак: делать через inline-block (оно там уже есть), но добавить white-space: nowrap;
Я так понимаю там была попытка сделать в одну строку с помощью отрицательных маргинов, но это не очень хороший вариант, потому что шрифты на разных ОС - немного разные и у меня, например, на Линуксе - они не уместились. Поэтому лучше применить white-space: nowrap;
А пробелы убрать физически - написать код без пробелов
 
<li></li><!-- тут не должно быть пробела --><li></li><li></li>

  • 0

#3 clean-nt

clean-nt

    Прохожий

    Топикстартер
  • Участник
  • 1
    19 сообщ.

Отправлено 08 Ноябрь 2018 в 09:03

А пробелы убрать физически - написать код без пробелов
 

<li></li><!-- тут не должно быть пробела --><li></li><li></li>

Здравствуйте!

 

Сделал вот так:

.pod-menu > li {
	position: absolute;
	display:inline-block;
	background-color: #E64A19;
	white-space: nowrap;
}

Получилось как на картинке. Причем, ссылка "Сайт" идет на первом месте, хотя по списку она на втором месте.

 

И насчет "<li>" не совсем понял, вот так:

<ul class="main-menu">
<li><a href="#company">О компании</a></li><li><a href="#services">Услуги</a>
<ul class="sub-menu">
<li><a href="#1">Разработка</a>
<ul class="pod-menu">
<li><a href="#5">Дизайн</a>
</li><li><a href="#7">Сайт</a></li>
</ul>
</li><li><a href="#2">Продвижение</a></li><li><a href="#3">Контекст</a></li>
</ul>
</li><li><a href="#team">Сотрудники</a></li>
</ul>

или так:

<ul class="main-menu"><li><a href="#company">О компании</a></li><li><a href="#services">Услуги</a><ul class="sub-menu"><li><a href="#1">Разработка</a>
<ul class="pod-menu"><li><a href="#5">Дизайн</a></li><li><a href="#7">Сайт</a></li>
</ul></li><li><a href="#2">Продвижение</a></li><li><a href="#3">Контекст</a></li>
</ul></li><li><a href="#team">Сотрудники</a></li></ul>

Прикрепленные изображения

  • site css.png

  • 0

#4 BaNru

BaNru

    Пацифизжу

  • суперМодератор
  • 1018
    3 733 сообщ.

Отправлено 08 Ноябрь 2018 в 15:44

Потому что позиция добавлена для LI, а надо для UL.

 

И стоит добавить обнуление отступов для списков (ul и li)

  margin:0;
  padding:0;

  • 0

#5 clean-nt

clean-nt

    Прохожий

    Топикстартер
  • Участник
  • 1
    19 сообщ.

Отправлено 09 Ноябрь 2018 в 07:08

Добрый вечер!
 

Потому что позиция добавлена для LI, а надо для UL.

 

Извините, пожалуйста, но я не понял, какая позиция? white-space: nowrap;?

Имеете ввиду она добавлена в:

.pod-menu > li 

а нужно в:

.pod-menu > ul  

или имеется ввиду:

position: absolute;

В этом отрезке кода что нужно изменить или добавить, чтобы заработало:

.pod-menu > li {
	position: relative;
	display:inline-block;
	background-color: #E64A19;
	white-space: nowrap;
	left: 1px;
	margin:0;
	padding:0;
}

.pod-menu > ul {
	position: absolute;
	display:inline-block;
	background-color: #E64A19;
	white-space: nowrap;
	left: 1px;
	margin:0;
	padding:0;
} 

P.S.

И сразу же вопрос, про наследовательность:

.main-menu .sub-menu {
position: absolute;
left: 1px;
width: 283px;
margin: 0;
padding: 0;
list-style: none;
background: #FCF8E3;
display:none; 
} 

Если я добавляю pod-menu, нужно ли мне тогда писать что-то вроде:

.main-menu .sub-menu. pod-menu {

или достаточно написать последние два:

.sub-menu. pod-menu {

Спасибо!


Сообщение отредактировал clean-nt: 09 Ноябрь 2018 в 07:12

  • 0

#6 clean-nt

clean-nt

    Прохожий

    Топикстартер
  • Участник
  • 1
    19 сообщ.

Отправлено 09 Ноябрь 2018 в 10:31

С задачей справился.


  • 0

#7 clean-nt

clean-nt

    Прохожий

    Топикстартер
  • Участник
  • 1
    19 сообщ.

Отправлено 06 Декабрь 2018 в 09:02

Здравствуйте!

 

Подскажите, пожалуйста, можно ли изменить код так, чтобы результат был как на верхней картинке (css primer2)?

При этом все блоки (блок 1, 2, 3) были отделены друг от друга, как они и написаны в коде.

 

Спасибо!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru-RU"><head><style></style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Включаем механизм выпадания</title>
    <link rel="shortcut icon" href="/favicon.ico" />
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
    <style>
    
body {
    min-width: 900px;
    padding: 0;
    font-family: Arial, sans-serif;
    font-size: 14px;
}
    
.name {
    text-align: center;
    padding: 1px;
    font-color: #00ff00;
    border: solid 1px black;
    background: url(wp_sand.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;    
    width: 915px;
    height: 50px;
    margin:0 auto;
}

a.class1
{
    width: 155px;
    height: 30px;
    display: block;
    text-align: center;
    font-weight: bold;
    margin: 3px;
}

.main-block-1 {
    margin: 3px;
    padding: 10;
    width: 155px;
    float: left;
}

.main-block-1 > li  {
    display: inline-block;
    position: relative;
}

.main-block-1 a {
    border-radius: 5px;
    color:  #36454A;
    background: -webkit-linear-gradient(top, #A4D3E0 , #A4D3E0 50%, #CBE3EB 50%);
    background: -o-linear-gradient(top, #A4D3E0 , #A4D3E0 50%, #CBE3EB 50%);
    background: linear-gradient(to top, #A4D3E0 , #A4D3E0 50%, #CBE3EB 50%);
    box-shadow: 2px 2px 3px black;
    display: block;
    padding: 8px 10px;
    text-decoration: none;
}

.main-block-1 a:hover {
    background: -webkit-linear-gradient(bottom, #A4D3E0 , #A4D3E0 50%, #CBE3EB 50%);
    background: -o-linear-gradient(bottom, #A4D3E0 , #A4D3E0 50%, #CBE3EB 50%);
    background: linear-gradient(to bottom, #A4D3E0 , #A4D3E0 50%, #CBE3EB 50%);
}

.main-block-1 .services1 {
    position: absolute;
    margin: 0;
    padding: 0;
    display: none;
}

.main-block-1 > li:hover .services1 {
    display: block;
}

.services1 > li {
    display: inline-block;
}

.main-block-2 {
    margin: 3px;
    padding: 10;
    width: 155px;
    float: left;
}

.main-block-2 > li  {
    display: inline-block;
    position: relative;
}

.main-block-2 a {
    border-radius: 5px;
    color:  #36454A;
    background: -webkit-linear-gradient(top, #A4D3E0 , #A4D3E0 50%, #CBE3EB 50%);
    background: -o-linear-gradient(top, #A4D3E0 , #A4D3E0 50%, #CBE3EB 50%);
    background: linear-gradient(to top, #A4D3E0 , #A4D3E0 50%, #CBE3EB 50%);
    box-shadow: 2px 2px 3px black;
    display: block;
    padding: 8px 10px;
    text-decoration: none;
}

.main-block-3 {
    margin: 3px;
    padding: 10;
    width: 155px;
    float: left;
}

.main-block-3 > li  {
    display: inline-block;
    position: relative;
}

.main-block-3 a {
    border-radius: 5px;
    color:  #36454A;
    background: -webkit-linear-gradient(top, #A4D3E0 , #A4D3E0 50%, #CBE3EB 50%);
    background: -o-linear-gradient(top, #A4D3E0 , #A4D3E0 50%, #CBE3EB 50%);
    background: linear-gradient(to top, #A4D3E0 , #A4D3E0 50%, #CBE3EB 50%);
    box-shadow: 2px 2px 3px black;
    display: block;
    padding: 8px 10px;
    text-decoration: none;
}

</style>

<body><div class="name"><a href="#name"><h2 style="color:white">ЗАГОЛОВОК<h2></a></div>
  <ul class="main-block-1">
  <li><a class="class1" href="#block1">БЛОК 1</a>
    <ul class="services1">
      <li><a href="#serv">Услуги</a>
      <li><a href="#workers">Сотрудники</a></li>
      <li><a href="#other">Другое</a></li>
      </ul><!--services-->
    </li><!--блок-1-->
  </ul><!--main-block 1-->
  <!--блок 2-->
  <ul class="main-block-2">
    <li><a class="class1" href="#block2">БЛОК 2</a>    
    </li><!--блок-2-->
  </ul><!--main-block 2-->
  <ul class="main-block-3">
    <li><a class="class1" href="#block3">БЛОК 3</a>    
    </li><!--блок-3-->
  </ul><!--main-block 3-->
</body>
</html>  

Прикрепленные изображения

  • css primer2.PNG
  • css primer1.png

Сообщение отредактировал clean-nt: 06 Декабрь 2018 в 09:11

  • 0

#8 BaNru

BaNru

    Пацифизжу

  • суперМодератор
  • 1018
    3 733 сообщ.

Отправлено 06 Декабрь 2018 в 10:07

Я же писал white-space: nowrap;

Добавлять надо для .main-block-1 > li

font-color: #00ff00;

Такого нет в CSS. Есть просто color


  • 0

#9 clean-nt

clean-nt

    Прохожий

    Топикстартер
  • Участник
  • 1
    19 сообщ.

Отправлено 06 Декабрь 2018 в 10:36

Я же писал white-space: nowrap;

Добавлять надо для .main-block-1 > li

font-color: #00ff00;

Такого нет в CSS. Есть просто color

Спасибо, сразу не понял.


  • 0

#10 clean-nt

clean-nt

    Прохожий

    Топикстартер
  • Участник
  • 1
    19 сообщ.

Отправлено 06 Декабрь 2018 в 12:10

И ещё два вопроса:

 

1. можно ли с помощью css свойств (без использования javascript) написать код так, чтобы "прослеживался весь путь наведения". Т.е. чтобы красный цвет был сначала на "БЛОК 1", когда выбрано подменю "Дизайн", ссылка "БЛОК 1" оставалась красного цвета, и ссылка "Дизайн" была красного цвета, и при наведении на ссылку "Интерьер" - ссылки "БЛОК 1, Дизайн, Интерьер" были одним цветом?

 

2. можно ли с помощью css свойств (без использования javascript) сдвинуть влево открывающиеся подменю (рисунок css primer4)?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru-RU"><head><style></style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Включаем механизм выпадания</title>
    <link rel="shortcut icon" href="/favicon.ico" />
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
	<style>
	
body {
    min-width: 900px;
    padding: 0;
    font-family: Arial, sans-serif;
    font-size: 14px;
}
	
.name {
    text-align: center;
    padding: 1px;
    color: #00ff00;
    border: solid 1px black;
    background: url(wp_sand.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;	
	width: 915px; 
    height: 50px; 
	margin:0 auto; 
}

a.class1 
{ 
    width: 155px; 
    height: 30px; 
	display: block;
	text-align: center;
	font-weight: bold;
	margin: 3px;
}

.main-block-1 {
    margin: 3px;
    padding: 10;
    width: 155px;
	float: left;
}

.main-block-1 > li  {
    display: inline-block;
    position: relative;
	white-space: nowrap;
}

.main-block-1 a {
    border-radius: 5px;
    color: #fff;
    background: #22B14C;
    display: block;
    padding: 8px 10px;
	text-decoration: none;
}

.main-block-1 a:hover {
    background:  #CA101D;
	color: #fff;
}

.main-block-1 .services1 {
    position: absolute;
    margin: 0;
    padding: 0;
    display: none;
}

.main-block-1 > li:hover .services1 {
    display: block;
}

.services1 > li {
    display: inline-block;
}

.services1 a {
    border-radius: 5px;
    color: #fff;
    background: #22B14C;
    display: block;
    padding: 8px 10px;
	text-decoration: none;
}

.services1 a:hover {
    background:  #CA101D;
	color: #fff;
}

.services1 .services2 {
    position: absolute;
    margin: 0;
    padding: 0;
    display: none;
}

.services1 > li:hover .services2 {
    display: block;
}

.services2 > li {
    display: inline-block;
}

.main-block-2 {
    margin: 3px;
    padding: 10;
    width: 155px;
	float: left;
}

.main-block-2 > li  {
    display: inline-block;
    position: relative;
}

.main-block-2 a {
    border-radius: 5px;
    color: #fff;
    background: #22B14C;
    display: block;
    padding: 8px 10px;
	text-decoration: none;
}

.main-block-3 {
    margin: 3px;
    padding: 10;
    width: 155px;
	float: left;
}

.main-block-3 > li  {
    display: inline-block;
    position: relative;
}

.main-block-3 a {
    border-radius: 5px;
    color: #fff;
    background: #22B14C;
    display: block;
    padding: 8px 10px;
	text-decoration: none;
}

</style>

<body><div class="name"><a href="#name"><h2 style="color:white">ЗАГОЛОВОК<h2></a></div>
  <ul class="main-block-1">
    <li><a class="class1" href="#block1">БЛОК 1</a>
	  <ul class="services1">
	    <li><a href="#serv">Услуги</a>
		  <ul class="services2">
		    <li><a href="#serv">Разработка</a></li>
		  </ul>
		</li>  
	    <li><a href="#workers">Дизайн</a>
		  <ul class="services2">
		    <li><a href="#in">Интерьер</a></li>
			<li><a href="#ex">Экстерьер</a></li>
		  </ul>
		</li>  
	    <li><a href="#other">Другое</a></li>
	  </ul><!--services-->
	</li><!--блок-1-->
  </ul><!--main-block 1-->
  <!--блок 2--> 
  <ul class="main-block-2">
    <li><a class="class1" href="#block2">БЛОК 2</a>	
    </li><!--блок-2-->
  </ul><!--main-block 2-->
  <ul class="main-block-3">
    <li><a class="class1" href="#block3">БЛОК 3</a>	
    </li><!--блок-3-->
  </ul><!--main-block 3-->
</body>
</html>	

Прикрепленные изображения

  • css primer4.jpg

Сообщение отредактировал clean-nt: 06 Декабрь 2018 в 12:21

  • 0

#11 BaNru

BaNru

    Пацифизжу

  • суперМодератор
  • 1018
    3 733 сообщ.

Отправлено 06 Декабрь 2018 в 12:31

Последующие вопросы задавайте оставляя код на jsfiddle

 

1) Да, ховер надо перенести на li

li:hover{
    background:  #CA101D;
}

В остальных местах убрать окрашивание

Чтобы понимать как оно работает - давным давно делал демку кому-то из местных

http://demo.g63.ru/table_hover.html

 

2) Да. Для этого родителю services2 задать left 0


  • 0

#12 clean-nt

clean-nt

    Прохожий

    Топикстартер
  • Участник
  • 1
    19 сообщ.

Отправлено 06 Декабрь 2018 в 12:38

Последующие вопросы задавайте оставляя код на jsfiddle

 

1) Да, ховер надо перенести на li

li:hover{
    background:  #CA101D;
}

В остальных местах убрать окрашивание

Чтобы понимать как оно работает - давным давно делал демку кому-то из местных

http://demo.g63.ru/table_hover.html

 

2) Да. Для этого родителю services2 задать left 0

Спасибо Вам большое!


  • 0

#13 clean-nt

clean-nt

    Прохожий

    Топикстартер
  • Участник
  • 1
    19 сообщ.

Отправлено 06 Декабрь 2018 в 14:38

Почему при наведении появляется только красная рамка?

 

http://jsfiddle.net/t7gf5upy/1/


  • 0

#14 BaNru

BaNru

    Пацифизжу

  • суперМодератор
  • 1018
    3 733 сообщ.

Отправлено 06 Декабрь 2018 в 19:27

Потому что margin: 3px;


  • 0

#15 clean-nt

clean-nt

    Прохожий

    Топикстартер
  • Участник
  • 1
    19 сообщ.

Отправлено 07 Декабрь 2018 в 10:01

Потому что margin: 3px;

Сделал:

li:hover{
    background:  #CA101D;
}

Убрал окрашивание в других местах.

Почему ссылки полностью не выделены красным цветом при наведении?


  • 0

#16 BaNru

BaNru

    Пацифизжу

  • суперМодератор
  • 1018
    3 733 сообщ.

Отправлено 07 Декабрь 2018 в 12:13

Потому что слоем выше стоит окрашивание

.main-block-1 a {
    background: #22B14C;
}

  • 0

#17 clean-nt

clean-nt

    Прохожий

    Топикстартер
  • Участник
  • 1
    19 сообщ.

Отправлено 07 Декабрь 2018 в 12:28

Сделал.


Сообщение отредактировал clean-nt: 07 Декабрь 2018 в 12:35

  • 0

#18 BaNru

BaNru

    Пацифизжу

  • суперМодератор
  • 1018
    3 733 сообщ.

Отправлено 07 Декабрь 2018 в 13:06

Тут главное: хоть что-нибудь понял из того что делал?


  • 0

#19 clean-nt

clean-nt

    Прохожий

    Топикстартер
  • Участник
  • 1
    19 сообщ.

Отправлено 09 Декабрь 2018 в 15:03

Да. 


  • 1

#20 clean-nt

clean-nt

    Прохожий

    Топикстартер
  • Участник
  • 1
    19 сообщ.

Отправлено 10 Декабрь 2018 в 12:47

Здравствуйте.

 

http://jsfiddle.net/1mu8L7dg/3/

По умолчанию: cлева ТИП, справа БЛОК1.
Можно ли сделать так, чтобы при наведении на БЛОК1, слева (под ТИП) появлялось МЕНЮ, далее, при наведении на Услуги, слева появлялось ВИДЫ, и МЕНЮ при этом не исчезало.
С помощью чего это сделать: "ul class" или <img>?


Сообщение отредактировал clean-nt: 10 Декабрь 2018 в 12:56

  • 0



Похожие темы Свернуть

  Название темы Форум Автор Статистика Последнее сообщение
Статистика

Количество пользователей, читающих эту тему: 1

0 пользователей, 0 гостей, 0 скрытых пользователей


    Google (1)