Html css выпадающее меню: Как создать выпадающее меню

Разное 

Содержание

выпадающее меню html · GitHub

<nav >
<button><i></i>
</button>
<ul>
<li><a href=»#» target=»_blank»>Аренда техники</a>
<ul>
<li><a href=»»>Экскаваторы</a></li>
<li><a href=»»>Трактора</a></li>
<li><a href=»»>Катки</a></li>
 <li><a href=»»>Бульдозеры</a></li>
<li><a href=»»>Тралы</a></li>
<li><a href=»»>Экскаваторы-погрузчики</a></li>
<li><a href=»»>Погрузчики</a></li>
<li><a href=»»>Самосвалы</a></li>
<li><a href=»»>Тонары</a></li>
<li><a href=»»>Мини-погрузчики</a></li>
<li><a href=»»>Фрезы</a></li>
<li><a href=»»>Эвакуатор</a></li>
<li><a href=»»>Манипуляторы</a></li>
<li><a href=»»>Асфальтоукладчик</a></li>
</ul>
</li>
<li><a href=»#» >Сыпучие материалы</a>
<ul>
<li><a href=»»>Асфальтная крошка</a></li>
<li><a href=»»>Гравий</a></li>
 <li><a href=»»>Керамзит</a></li>
<li><a href=»»>Песок строительный</a></li>
<li><a href=»»>Песчано-гравийная смесь</a></li>
<li><a href=»»>Щебеночно-песчаная смесь</a></li>
<li><a href=»»>Отсев гранитный</a></li>
<li><a href=»»>Грунт растительный</a></li>
<li><a href=»»>Грунт плодородный</a></li>
<li><a href=»»>Торф</a></li>
<li><a href=»»>Навоз</a></li>
<li><a href=»»>Бой кирпича</a></li>
<li><a href=»»>Асфальтный оскол</a></li>
</ul>
</li>
<li><a href=»#» >Строительные работы</a>
<ul>
<li><a href=»»>Подготовительные работы</a></li>
<li><a href=»»>Земляные работы</a></li>
<li><a href=»»>Свайные работы</a></li>
<li><a href=»»>Монтаж металлических конструкций</a></li>
<li><a href=»»>Устройство автомобильных дорог</a></li>
</ul>
</li>
<li><a href=»#» >О компании</a></li>
<li><a href=»#» >Контакты</a></li>
<li ><a href=»» title=»Скачать каталог» ><i aria-hidden=»true»></i></a></li>
</ul>
</nav>

Выпадающие меню · Bootstrap на русском

Более десятка повторно используемых компонентов построены так, чтобы обеспечить кнопки, выпадающие меню, группы ввода, навигации, оповещения, и многое другое.

Раскрывающиеся списки переключаемой, контекстная накладки для отображения списков ссылок и более. Они сделаны интерактивными с включенным Bootstrap выпадающего JavaScript плагин. Они переключаются нажатием, не парит; это преднамеренное дизайнерское решение.

Содержание

  • Содержание
  • Примеры
    • Одиночная кнопка выпадающего меню
    • Split кнопка с выпадающим меню
  • Изменение размера
  • Вариант списка сверху
  • Использование
    • С помощью данных атрибутов
    • Через JavaScript
    • Варианты
    • Методы
    • События

Примеры

Переключение обернуть выпадающем (ваша кнопка или ссылка) и в выпадающем меню в .dropdown, или другой элемент, который заявляет, position: relative;. Раскрывающиеся списки могут быть вызваны из <a> или <button> элементы, чтобы лучше соответствовать вашим потенциальным потребностям.

Одиночная кнопка выпадающего меню

Ни один .btn можно превратить в выпадающем тумблер с некоторыми изменениями разметки. Вот как вы можете положить их на работу с <button>

элементы:

<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div aria-labelledby="dropdownMenuButton">
    <a href="#">Action</a>
    <a href="#">Another action</a>
    <a href="#">Something else here</a>
  </div>
</div>

И с <a> элементами:

<div>
  <a href="http://example.com" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
  </a>
  <div aria-labelledby="dropdownMenuLink">
    <a href="#">Action</a>
    <a href="#">Another action</a>
    <a href="#">Something else here</a>
  </div>
</div>

Самое приятное, что вы можете сделать это с любым вариантом кнопки:

<!-- Пример одной кнопки опасности - >
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  </button>
  <div>
    <a href="#">Action</a>
    <a href="#">Another action</a>
    <a href="#">Something else here</a>
    <div></div>
    <a href="#">Separated link</a>
  </div>
</div>

Split кнопка с выпадающим меню

Аналогичным образом создайте сплит кнопки раскрывающиеся списки с практически такой же разметки, как одной кнопки раскрывающиеся списки, но с добавлением

. dropdown-toggle-split для правильного шрифта выпадающего каре.

Мы используем эту экстра-класса, чтобы уменьшить горизонтальную padding по обе стороны от каретки на 25% и удалите margin-left, который добавляется для обычной кнопки выпадающих меню. Эти изменения держать курсор по центру кнопку разделить и обеспечить более точного размера нажмите рядом с основной кнопкой.

<!-- Пример сплит опасности - >
<div>
  <button type="button">Action</button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Toggle Dropdown</span>
  </button>
  <div>
    <a href="#">Action</a>
    <a href="#">Another action</a>
    <a href="#">Something else here</a>
    <div></div>
    <a href="#">Separated link</a>
  </div>
</div>

Изменение размера

Кнопка меню работы с кнопками всех размеров, в том числе по умолчанию и секущихся выпадающих кнопок.

<!-- Большие группы (кнопка по умолчанию и сплит) -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button
  </button>
  <div>
    ...
  </div>
</div>
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button
  </button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Toggle Dropdown</span>
  </button>
  <div>
    ...
  </div>
</div>
<!-- Небольшие группы (кнопка по умолчанию и сплит) -->
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button
  </button>
  <div>
    ...
  </div>
</div>
<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button
  </button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Toggle Dropdown</span>
  </button>
  <div>
    . ..
  </div>
</div>

Вариант списка сверху

Вызвать выпадающее меню над элементами, добавив .dropup для родительского элемента.

<!-- Кнопка по умолчанию dropup -->
<div>
  <button type="button">Dropup</button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Toggle Dropdown</span>
  </button>
  <div>
    <!-- Ссылки выпадающего меню -->
  </div>
</div>
<!-- Кнопка сплит dropup -->
<div>
  <button type="button">
    Split dropup
  </button>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>Toggle Dropdown</span>
  </button>
  <div>
    <!-- Ссылки выпадающего меню -->
  </div>
</div>

Исторически выпадающем меню had чтобы быть одной, но это уже не в случае с v4. Теперь при необходимости можно использовать <button> элементы в раскрывающихся списках, а не просто <a>ы.

<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div aria-labelledby="dropdownMenu2">
    <button type="button">Action</button>
    <button type="button">Another action</button>
    <button type="button">Something else here</button>
  </div>
</div>

По умолчанию, выпадающее меню автоматически устанавливается 100% от верхнего и вдоль левого края его родителя. Добавьте .dropdown-menu-right к .dropdown-menu для выравнивание выпадающего меню справа.

Внимание! меню расположены только с CSS и может потребоваться некоторые дополнительные стили для точного выравнивания.

<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    This dropdown's menu is right-aligned
  </button>
  <div>
    <button type="button">Action</button>
    <button type="button">Another action</button>
    <button type="button">Something else here</button>
  </div>
</div>

Добавьте заголовок чтобы маркировать участки в любом выпадающего меню.

<div>
  <h6>Dropdown header</h6>
  <a href="#">Action</a>
  <a href="#">Another action</a>
</div>

Отдельные группы связанных элементов меню с делителем.

<div>
  <a href="#">Action</a>
  <a href="#">Another action</a>
  <a href="#">Something else here</a>
  <div></div>
  <a href="#">Separated link</a>
</div>

Добавить .disabled для пунктов в раскрывающемся меню стиль их как отключенные.

<div>
  <a href="#">Regular link</a>
  <a href="#">Disabled link</a>
  <a href="#">Another link</a>
</div>

Использование

Через атрибуты данных или JavaScript, выпадающее плагин переключает скрытое содержание (выпадающие меню), переключая .open класс родительского элемента списка.

На мобильных устройствах, открывая выпадающий добавляет .dropdown-backdrop как площадь нажатия для закрытия выпадающего меню При нажатии за меню требование для правильной поддержки iOS. Это означает, что переход от открытого выпадающего меню в другое меню требуется дополнительное нажатие на мобильный.

Примечание: data-toggle="dropdown" атрибут является основанием для закрытия выпадающего меню на уровне приложения, так что это хорошая идея, чтобы всегда использовать его.

С помощью данных атрибутов

Добавить data-toggle="dropdown" на ссылку или кнопку для переключения в меню.

<div>
  <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
  </button>
  <div aria-labelledby="dLabel">
    ...
  </div>
</div>

Через JavaScript

Вызвать меню через JavaScript:

$('. dropdown-toggle').dropdown()

Варианты

None.

Методы

СпособОписание
$().dropdown('toggle')Переключает меню данной панели навигации и вкладок навигации.

События

Все выпадающие события обстреляли .dropdown-menu’родительский элемент S и relatedTarget свойство, значением которого является переключение элемента привязки.

СобытиеОписание
show.bs.dropdownЭто событие немедленно срабатывает при вызове метода экземпляра-шоу называется.
shown.bs.dropdownЭто событие запускается, когда выпадающее меню становится видимым для пользователя (будет ждать CSS переходы для завершения).
hide.bs.dropdownЭто событие немедленно уволили, когда скрывать метод экземпляра называется.
hidden.bs.dropdownЭто событие запускается, когда в списке есть, который скрыт от пользователя (будет ждать CSS переходы для завершения).
$('#myDropdown').on('show.bs.dropdown', function () {
  // сделать что-то...
})

Плавно открывающееся меню с помощью CSS — Дизайн и разработка сайта

Осуществим нашу задумку с помощью самого обычного CSS. В следующей статье, если не забуду, то опишу этот же эффект с помощью jQuery. Но а пока, давайте приступим к разбору данного метода. Но, сначала предложу посмотреть, что получится в итоге:





Первым делом, давайте напишем HTML код нашего меню. Меню будет простейшим. Для примера у него будет 2 пункта у каждого из которых будет выпадающий список с подпунктами.


<nav>
	<ul>
		<li>
		<a href="#">пункт 1</a>
			<ul>
				<li><a href="#">Выпадающий пункт 1</a></li>
				<li><a href="#">Выпадающий пункт 2</a></li>
				<li><a href="#">Выпадающий пункт 3</a></li>
			</ul>
		</li>
		<li>
		<a href="#">пункт 2</a>
			<ul>
				<li><a href="#">Выпадающий пункт 1</a></li>
				<li><a href="#">Выпадающий пункт 2</a></li>
				<li><a href="#">Выпадающий пункт 3</a></li>
			</ul>
		</li>

	</ul>
</nav>

Думаю тут все понятно, самое простое 2-х уровневое меню. Как и говорил, меню имеет два главных пункта, можете добавить сколько угодно, если нужно. Дальше нужно просто добавить стили, которые и сделают всю магию 🙂


#slow_nav > ul{
	width: 500px;
	margin:25px auto 0;
}

#slow_nav > ul > li{
	list-style: none;
	display: inline-block;
	position:relative;
	padding:0;
}

#slow_nav a{text-decoration:none;}

#slow_nav > ul > li > a{
	font-size:18px;
	padding:5px;
	background-color:#333;
	color:#fff;
}

#slow_nav li ul{
	position:absolute;
	list-style:none;
	text-align:center;
	top:15px;
	font-size:15px;
	left:0;
	margin:0;
	padding:0;

/* Данные строки нужны для правильной работы анимации */
	max-height:0px;
	overflow:hidden;
	-webkit-transition:max-height 0. 4s linear;
	-moz-transition:max-height 0.4s linear;
	transition:max-height 0.4s linear;
/* конец */
}

#slow_nav li:hover ul{
	max-height:300px;
}

#slow_nav li ul li{
	background-color:#333;
	border-bottom:1px solid #888;
}

#slow_nav li ul li:last-child{
	border-bottom:none;
}

#slow_nav li ul li a{
	padding:5px 12px;
	color:#fff;
	display:block;
}

#slow_nav li ul li:hover{
	background-color:#444;
}

#slow_nav li ul li:first-child{
	margin-top:25px;
	position:relative;
}

#slow_nav li ul li:first-child:before{
	content:'';
	position:absolute;
	width:1px;
	height:1px;
	border:5px solid transparent;
	border-bottom-color:#333;
	left:10px;
	top:-10px;
}

Код CSS не маленький., но по своей сути не сложный. Если Вы владеете навыками верстки, то запросто разберетесь что и как. Я лишь остановлюсь на некоторых моментах, которые являются важными.

Первым делом это сама анимация. Нужный код выделен комментариев в коде — /* Данные строки нужны для правильной работы анимации */. Удалять из нельзя, в противном случаи анимация перестанет работать. В данном отрезке кода, изначально мы задаем высоту в ноль пикселей —

max-height:0px; и прописываем свойство overflow:hidden;, чтобы скрыть наше дочернее меню, то есть выпадающее. Дальше уже прописываем кроссбраузерное свойство transition, которое совершит анимацию.


-webkit-transition:max-height 0.4s linear;
-moz-transition:max-height 0.4s linear;
transition:max-height 0.4s linear;

Тут можете изменить разве что время анимации. В данный момент время задано 0.4 секунды. Сразу после того как задали анимацию, добавлено свойство , для задания новой высоты при наведении на главные пункты меню:


#slow_nav li:hover ul{
	max-height:300px;
}

Тут такая картинка. Высота задается максимальная фиксированная, если у Вас высота выпадающего меню будет побольше, то и значение меняйте на больше. В противном случаи Ваше меню обрежет по высоте 300 пикселей.

Далее уже задаем стили для выпадающего меню, так что на них подробно останавливаться не буду. Ту как бы и все. Это и есть весь способ. Он простой и действенный и справляется со своей задачей на все 100%.

Данный способ можно применять не только к самописным меню но и к тем же динамическим меню, которые создаются системами управления сайтом, например WordPress. Для этого нужно немного подправить стили и все. То есть первый HTML код использовать не нужно, только стили. В стилях нужно заменить имя айди #slow_nav на то что будет у Вас, ну и возможно подправить еще что-то по мелочам. Подробно останавливаться не буду. Для каждого случая нужен персональный подход, так что уж извините 🙂 Я дал идею и способ, а Вам решать, применять его или нет.

На этом все, спасибо за внимание. 🙂

Как оформить раскрывающийся список с помощью CSS?

< html >

 

< head >

     < style >

     h2 {

         цвет: зеленый;

     }

      

     select {

         -webkit-web-appance;

         -moz-внешний вид: нет;

         -ms-внешний вид: нет;

         внешний вид: нет;

         контур: 0;

         фон: зеленый;

         background-image: нет;

         граница: 1 пиксель сплошной черный;

}

. Select {

Положение: относительно;

         дисплей: блок;

         ширина: 20 см;

         высота: 3см;

         высота строки: 3;

         фон: #2C3E50;

         переполнение: скрыто;

         радиус границы: .25em;

}

SELECT {

Шид: 100%;

         высота: 100%;

         поля: 0;

         заполнение: 0 0 0 . 5em;

         цвет: #fff;

         курсор: указатель;

}

SELECT ::-MS-Expand {

дисплей: нет;

}

. Select :: After {

Содержание: '\ 25BC';

         позиция: абсолютная;

         верх: 0;

         справа: 0;

         снизу: 0;

         заполнение: 0 1em;

         фон: #34495E;

         события указателя: нет;

}

. Select: Hover :: After {

Цвет: #F39C12;

     }

      

     .select::after {

         -webkit-transition: .25s все легко;

         -o-переход: .25 с все легко;

         переход: 0,25 с все легко;

}

Стиль >

HEAD >

0007 < body >

     < center >

         < h2 >GeeksforGeeks h2 >

         < div класс = "выбрать" >

             <

7 name

= "slct" id = "slct" >

                 < option >Computer Science Subjects option >

< Опция Значение = "1" > Операционная система Опция >

                 < option value = "2" >Computer Networks option >

                 < option value = "3" >Структура данных option >

                 < option значение = "4" > Алгоритм Опция >

< Вариант Значение = "5" > COGRAMNINGINGINGINGINGINGINGINGINGINGINGINGINGINGINGINGINGINGINGINGINGINGINGINGING = " > CORGIN Опция >

< Опция Значение = "6" > Java Вариант > > Java . 0008

             select >

         div >

     center >

корпус >

 

html >

250001

DigitalOcean предлагает облачные продукты для каждого этапа вашего путешествия. Начните с бесплатного кредита в размере 200 долларов США!

Only CSS3 Dropdown Menu

Author

Pedro Nauck

Made With

HTML,CSS(SCSS)

Demo

Check Out Demo

Links

Download

Pure CSS DropDown Menu

Author

Andor Nagy

Сделано с

HTML,CSS

Демо

Ознакомиться с демо

Links

Download

Simple Pure CSS Dropdown Menu

Author

Connor Brassington

Made With

HTML(PUG),CSS(SCSS)

Demo

Check Out Demo

Links

Download

Простое выпадающее меню.

Автор.0009

Simple Menu

Author

Hugh Balboa

Made With

HTML,CSS

Demo

Check Out Demo

Links

Download

css dropdown menu

Author

Code Raven

Made With

HTML,CSS(LESS)

Демо

Проверить демо

Ссылки

Скачать

Адаптивное меню навигации Чистый CSS

Автор

Дженнинг

Сделано с

HTML, CSS (за задержкой)

ДЕМО

Проверьте демонстрацию

Ссылки

Скачать

MENU #Codepench

AWARINGHED

MALENMMED

с MADEMMED

. 9068 с MADEMMED

9. 9068 с MADEMMED

. 9068 с MADEMMED

. 9068

.

Демо

Проверить демо

Ссылки

Скачать

Swanky Pure CSS Drop Down Menu V2.0

Автор

Jamie Coulter

90S0090 HTML,

Made With

ДЕМО

Проверьте демо

Ссылки

Скачать

CSS раскрывающийся меню.

Скачать

Меню Molten

Автор

Зеландия

Сделано с

HTML,CSS

Демо

Проверить демо

Скачать

Ссылки0009

Pure CSS Drop down menu + Hover changes

Author

Brandon Loehlein

Made With

HTML,CSS

Demo

Check Out Demo

Links

Download

Fancy Menu #CodePenChallenge

Author

Хесус Родригес

Сделано с

HTML,CSS

Демо

Проверить демо

Ссылки

Скачать

Зигзагообразное выпадающее меню

Author

Catalin Rosu

Made With

HTML,CSS

Demo

Check Out Demo

Links

Download

A dropdown menu with onclick trigger

Author

Sazzad

Made With

HTML ,CSS,JS

Демонстрация

Проверить демонстрацию

Ссылки

Загрузка

Пользовательское раскрывающееся меню Pure CSS

Автор

Silver Drop

Made With

HTML,CSS,JS

Демо

Проверить демо

Ссылки

Скачать

Простая плоская навигация с работающим выпадающим меню.

Автор

Энди Тран

Сделано с

HTML (HAML), CSS (MESS), JS

DEMO

Проверьте Demo

. элементы в раскрывающееся меню, когда они переполняются. Кнопка в стиле гамбургера со значком подсчета появляется, когда есть скрытые элементы, которые нужно открыть.

Author

lukejacksonn

Made With

HTML,CSS(LESS),JS

Demo

Check Out Demo

Links

Download

Responsive Bootstrap 4 menu – light/dark

Author

Ivan Grozdic

Сделано с

HTML,CSS,JS

Демо

Проверить демо

Ссылки

Скачать

Pure CSS3 Авторское выпадающее меню с анимацией (по вертикали)

9

Rizky Kurniawan Ritonga

Made With

HTML,CSS,JS

Demo

Check Out Demo

Links

Download

Responsive Bootstrap mega menu

Author

Martin Stanek

Made With

HTML ,CSS(LESS),JS

Демо

Проверить демо

Ссылки

Скачать

Раскрывающиеся списки меню CSS3

Автор

Колин

9 Сделано с

HTML, CSS (SCSS), JS

ДЕМО

Проверьте демонстрацию

Ссылки

Скачать

MEGA MEGA с Multi Dirl Down

.

JS

Demo

Check Out Demo

Links

Download

Взаимодействие с выпадающим меню

Автор

Aaron Iker

Made With

9, HTML0658 ДЕМО

Проверьте демо

Ссылки

Скачать

ОТВЕТСТВЕННЫЕ МЕНЮ #1

Автор

VERONICA

MADE с

HTML, CSSS

. Загрузить

Расширение окна поиска с раскрывающимся фильтром

Автор

Скотт Буллох

Сделано с

HTML,CSS(SCSS),JS

Демо

Проверить демо

Ссылки

Скачать

Последний пост

Присоединяйтесь к нам (обязательно для присоединения):

91
Следуйте за нас на Facebook: . : Нажмите здесь
Следуйте за нами в Твиттере: Нажмите здесь
Следуйте за нами на Quora Space Нажмите здесь
Следуйте за нами на Pinterest: Нажмите здесь

Чистая выпадающая панель навигации CSS с нуля

Выпадающие меню неизбежны, когда дело доходит до разработки интерфейса. В какой-то момент вы столкнетесь с ними.

Хотя большинство фреймворков CSS делают это автоматически, иногда вам просто нужно сделать это самостоятельно.

Но вопрос — как?

Для тех, кто плохо знаком с CSS или просто имеет базовые знания, это может показаться ловушкой. Вы можете плавать, вы можете отображать в строке, вы можете делать целую кучу вещей, но вы просто не можете заставить вещи выпадать должным образом.

Вот краткое руководство о том, как все это работает и почему это работает, с пошаговыми примерами кода.

Или, если вам нужен окончательный рецепт кода, вы можете просто прокрутить вниз и взять его там.

Но прежде чем мы начнем, нам нужно сначала уяснить несколько концепций.

Относительное и абсолютное позиционирование в CSS — одна из тех раздражающих концепций, с которыми часто сталкиваются начинающие разработчики интерфейсов.

Все мы знаем, что он может перемещать предметы, но как это работает?

Начнем с относительно и кода ниже:

 
Текст здесь


Здесь снова немного текста

При рендеринге граничная область каждого тега выглядит примерно так:

Большинство элементов по умолчанию являются блоками, что означает, что они растягиваются до края экрана. Вот почему теги

растягиваются до самого края вашего браузера.

Когда мы применяем относительное позиционирование к элементу, любые свойства координат, такие как сверху , слева , справа и снизу переместит этот элемент с того места, где он сейчас находится на экране.

Допустим, мы хотим применить относительно к нашим тегам p и переместить его вправо и вниз. Мы бы написали что-то вроде этого:

 p { position:relative; слева: 50 пикселей; верх: 50 пикселей; }

Это приведет к следующему выводу:

Блоки p перемещаются соответственно (50 пикселей слева и 50 пикселей сверху). Относительность его исходной точки основана на экране.

Следует отметить, что когда вы используете относительно , это не перемещает ваши элементы из естественного потока блоков. Это означает, что если у вас есть контейнер div вокруг ваших тегов p и вы примените к нему относительно , это не приведет к коллапсу div .

Это приведет к перемещению юнита как единого целого. Это относительно исходного положения и будет подталкивать его в зависимости от того, куда вы хотите его направить.

Например, ваш HTML-код выглядит примерно так:

 <дел>
   
Текст здесь

   
Снова текст

И ваш CSS выглядит примерно так:

 div{
должность: родственница; слева: 50 пикселей; верх: 50 пикселей;
   }

Ваш визуальный вывод будет примерно таким:

Итак, при чем тут абсолютное позиционирование?

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

Например, представьте, что у вас есть следующий HTML:

 
Здесь какой-то текст

<дел>
    
Текст здесь

    
Снова текст

Некоторый текст

Вот как поток будет выглядеть при нормальных обстоятельствах:

Если вы примените position:absolute к вашему div , а затем переместите его, исходные координаты не будет основываться на угловой точке вашего текущего положения. Скорее, они будут основаны на верхнем левом углу вашего окна.

В дополнение к этому весь блок div будет перемещен из вашего естественного потока блоков. Он будет сидеть поверх всего остального, как будто он существует на своем собственном плане. Ширина также схлопывается до ширины самого большого элемента внутри (который также схлопывается).

В итоге это выглядит так:

Предположим, вы начинаете перемещать его, и ваш код CSS выглядит примерно так:

 div {
положение: абсолютное; верх:0; слева: 10 пикселей;
}

Вместо размещения div в зависимости от его текущей позиции, начальные координаты будут начинаться в верхнем левом углу и идти оттуда.

В итоге это выглядит примерно так:

Как работает комбинация CSS относительного и абсолютного позиционирования?

Ну, если подумать, относительно сохраняет исходное позиционирование статичным, не выводя его из потока блоков. absolute поднимает элемент со страницы и перемещает его в соответствии с исходными координатами контейнера.

Когда контейнера нет, окно эквивалентно родительскому контейнеру.

Предположим, у вас есть комбинация CSS, которая выглядит примерно так:

 div {position:relative;}
div p {позиция: абсолютная; верх: 50 пикселей; }

В итоге вы получите что-то вроде этого:

Исходный контейнер div остается на месте, в то время как теги p накладываются друг на друга, потому что они были перемещены из нормального потока в свою собственную плоскость. , и размещаются с div левый верхний угол в качестве отправной точки.

Высота div также рушится. Почему?

Потому что технически в нем ничего нет. absolute убрал теги p из нормального потока, поэтому у документа создается впечатление, что внутри ничего нет — отсюда и коллапс. Обойти это можно, установив ширину и высоту в div , если вам действительно нужно заполнить пространство для фоновых дисплеев и т. д.

Итак, это одна из концепций понимания того, как работают выпадающие меню на чистом CSS. Давайте перейдем к следующему.

Каждый элемент HTML имеет отображаемое значение по умолчанию, и это значение часто равно block .

По умолчанию имеется несколько встроенных элементов. Вот краткий список того, что по умолчанию.

блочный элемент по умолчанию

Обратите внимание,что был создан внешний неупорядоченный список,и внутри этого неупорядоченного списка находится элемент списка,который будет содержать ссылку горизонтальной навигации верхнего уровня.В этом случае имя ссылки — «продукты»,и она находится внутри нулевой ссылки.

Перед закрытием тега ссылки элемента списка верхнего уровня()рядом с ним был создан другой неупорядоченный список.Внутри внутреннего неупорядоченного списка находятся теги элементов списка,которые составляют ссылки для меню раскрывающегося списка.

Тег элемента списка верхнего уровня теперь закрыт,но внутри него сохраняется неупорядоченный список.Очень важно,чтобы вы использовали html-комментарии во время ручного кодирования,чтобы вы знали,где заканчивается каждый неупорядоченный список и начинается другой.Существует четкое свойство float html,включенное и прикрепленное после меню списка,которое будет содержать плавающие элементы и позволит возобновить нормальный поток документов.Затем выпадающее меню помещается в контейнер div с именем «navMenu».

2.Добавьте выпадающее горизонтальное меню CSS

Вот стили CSS,которые заставляют работать горизонтальное меню CSS:

#navMenu{маржа:0;ширина:авто;}
#navMenu ул{маржа:0;заполнение:0;высота строки:30 пикселей;}
#navMenu li{маржа:0;заполнение:0;стиль списка:нет;плыть налево;должность:родственница;фон:#999;}
#navMenu ul li a{выравнивание текста:по центру;высота:30 пикселей;ширина:150 пикселей;дисплей:блок;цвет:#000;семейство шрифтов:"Comic Sans MS",курсив;текстовое оформление:нет;цвет:#FFF;граница:1px сплошная#FFF;тень текста:1px 1px 1px#000;}
#navMenu ул ул{положение:абсолютное;видимость:скрытая;верх:32px;}
#navMenu ul li:hover ul{видимость:видимая;z-индекс:9999;}
#navMenu li:hover{фон:#09F;}
#navMenu ul li:hover ul li a:hover{цвет:#000;фон:#CCC;}
#navMenu a:наведите{цвет:#000;}.clearFloat{ясно:оба;маржа:0;заполнение:0;}
#navMenu ul li{дисплей:встроенный;}

Выпадающие стили css сначала удаляют все поля по умолчанию из используемых тегов списка и тегов div.Затем тег списка устанавливается в относительную позицию и используется в качестве буфера для неупорядоченного списка,для которого устанавливается абсолютная позиция.

Выпадающее меню css для вложенных ссылок установлено в скрытое положение.Затем выпадающее меню css снова появляется,когда посетитель наводит курсор на основную ссылку.

Выпадающее меню css для вложенных ссылок установлено в скрытое положение.Затем выпадающее меню css настраивается на повторное появление,когда посетитель наводит курсор на основную ссылку,и достигается с помощью псевдоселектора наведения.

Горизонтальное CSS-меню затем оформляется в соответствии с цветами вашего веб-сайта.Затем к стилям выпадающего меню css добавляются сложные,но интересные эффекты прокручивающегося меню css.Вы должны поэкспериментировать с цветовой схемой вашего выпадающего меню css,и таким образом вы сможете понять,как эффекты меню css rollover используются с каждым селектором,присутствующим в стилях,которые вы вставили в свой файл css.

Если вы скопировали и вставили все стили html для горизонтального выпадающего меню и выпадающей навигации,а также скопировали стили для выпадающего меню css,то у вас будет точно такое же выпадающее меню css,которое я создал в эта веб-страница.

Чтобы добавить дополнительные столбцы и элементы меню для раскрывающегося меню,просто скопируйте и вставьте html-код еще раз и измените элемент меню и элементы списка на ссылки,которые вы хотите для своего веб-сайта.

Любые проблемы,пожалуйста,оставьте сообщение в поле для комментариев.



комментариев от Disqus.комментарии в блогах на основе Disqus

Планы веб-хостинга,которые я использую

  • Планы хостинга GoDaddy.com!
  • Безлимитный хостинг на HostGator
  • JustHost.com Неограниченное количество доменов
  • Хостинг всего за 4,88 доллара в месяц!-паутина

Учебное пособие по контактной форме PHP Luxury

  • Контактная форма и проверка формы
    14/06/2011 — Видеоурок — Часть 1
  • Контактная форма и проверка формы — 2
    14/06/2011 — Видеоруководство — Часть 2

Корзина Great Premium

Маркетинг по электронной почте — рекомендуемые ссылки

  • AWEBER — Электронный маркетинг

Раскрывающееся меню CSS — Dreamweaver

  • Раскрывающееся меню CSS — Dreamweaver
    13/05/2010 — Видеоруководство,часть 1
  • Раскрывающееся меню CSS — Dreamweaver
    05.13.2010 — Видеоруководство,часть 2
  • Учебное пособие по выпадающему меню CSS
    05.14.2010 — Учебное пособие по статье

Плавающее меню — Dreamweaver

  • Плавающее боковое меню
    26/05/2010 — Dreamweaver Статья,учебное пособие
  • Боковая панель с плавающим меню — Dreamweaver
    23/04/2010 — видеоруководство — часть 1
  • Боковая панель плавающего меню — Dreamweaver
    23/10/2010 — Видеоурок — Часть 2

Меню навигации с вкладками

  • Меню навигации с вкладками CSS
    19/06/2010 — Руководство по статье Dreamweaver
  • Меню с вкладками CSS
    19/06/2010 — Видеоруководство по Dreamweaver

Текстовые поля CSS в Dreamweaver

  • Учебное пособие по текстовым полям CSS
    31/05/2010 — Учебное пособие по статье Dreamweaver
  • Текстовые поля Pure CSS — Dreamweaver
    29/04/2010 — Видеоруководство,часть 1
  • Текстовые поля на чистом CSS — Часть 2
    29/04/2010 — Видеоруководство,часть 2

CSS 3 в Dreamweaver

  • CSS shadow Text
    29/05/2010 — Учебное пособие по статье Dreamweaver
  • CSS3 Box Shadows
    23/05/2010-Статья Учебник
  • CSS3 Скругленные углы
    22/05/2010-Статья Учебник
  • CSS3 Shadow Text в Dreamweaver
    27/04/2010 — Видеоруководство
  • Блочные тени CSS3 в Dreamweaver
    20/04/2010 — Видеоруководство
  • Скругленные углы CSS3 Dreamweaver
    19/04/2010 — Видеоруководство

J Query в Dreamweaver

  • Поворот изображений продукта и масштабирование
    10.12.2010 — Видеоруководство — Часть 1
  • Ротатор изображений продукта и масштабирование
    10.12.2010-Видео урок-Часть 2
  • jQuery Image Rotator — слайдер S3,часть 1
    09.10.2010 — видеоурок — часть 1
  • jQuery Image Rotator — слайдер S3,часть 2
    09.10.2010 — видеоурок — часть 2
  • jQuery Infinite Carousel Video Tutorial
    30/08/2010 — Video Tutorial — Part 1
  • Видеоруководство по jQuery Infinite Carousel
    30/08/2010 — Видеоурок — Часть 2
  • Учебное пособие по галерее изображений jQuery
    06.04.2010 — Руководство по статье Dreamweaver
  • Учебное пособие по jQuery Lightbox Html
    06.03.2010 — Учебное пособие по статье Dreamweaver
  • Меню Lavalamp jQuery
    30/05/2010 — Руководство по статье Dreamweaver
  • Галерея лайтбоксов jQuery — 1
    17/05/2010 — Видеоурок,часть 1
  • Галерея лайтбоксов jQuery — 2
    17/05/2010 — Видеоруководство,часть 2
  • Галерея лайтбоксов jQuery — 3
    17/05/2010 — Видеоруководство,часть 3
  • Учебное пособие по подключаемому модулю jQuery Lightbox
    05.13.2010 — Видеоурок,часть 1
  • Плагин jQuery Lightbox
    05.13.2010 — Видеоруководство,часть 2
  • j Запрос меню лавовой лампы в CS4 1 из 2
    28/04/2010 — Видеоурок,часть 1
  • Меню лавовой лампы jQuery в CS4 2 из 2
    28/04/2010 — Видеоурок,часть 2

Прозрачные наложения Dreamweaver

  • Прозрачные наложения слоев 20/05/2010 — Учебное пособие по статье
  • Прозрачные наложения в Dreamweaver 31/03/2010 — Видеоурок,часть 1
  • Прозрачные наложения в Dreamweaver 31/03/2010 — Видеоурок,часть 2

CSS в Adobe Dreamweaver

  • Стилизация тегов в Dreamweaver CS4

Все типы ссылок в Dreamweaver

  • Именованные привязочные ссылки Dreamweaver 10.14.2010
  • Карта горячих точек изображения в Dreamweaver 10.14.2010
  • Создание ссылок электронной почты в Dreamweaver 10.

    No related posts.

[an error occurred while processing the directive]
Автор записи

Добавить комментарий

Ваш адрес email не будет опубликован.Обязательные поля помечены*

[an error occurred while processing the directive]
[an error occurred while processing the directive][an error occurred while processing the directive]
[an error occurred while processing the directive][an error occurred while processing the directive]
[an error occurred while processing the directive][an error occurred while processing the directive]