fle game engine - движок для создания игр
fle game engine - движок для создания игр


Balls and holes PC game / Balls and Holes PC игра
Вакансии
Игродельня
Сегодня
28 июня 2017
17:10
Вход Регистрация Забыли пароль ?

megainformatic - Пишем свою соц. сеть - модуль предложений для webjob - часть реализации для личного кабинета
Пишем свою соц. сеть - модуль предложений для webjob - часть реализации для личного кабинета Доброго времени суток, продолжаем наше погружение в разработку социальной сети. В предыдущей статье - Пишем свою соц. сеть - модуль предложений для webjob я уже рассказал, что нам потребуется в теории. Теперь перейдём к
подробнее...

Теги

создание сайтов, создание игр, дизайн, игры, информатика, уроки photshop, php, c++, музыка, delphi, cms, робосайт

Статьи сайта

megainformatic - Уроки Fruity Loops Studio - пишем свою музыку

megainformatic - Уроки Fruity Loops Studio - пишем свою музыку - урок 1 - Быстрый старт

megainformatic - Сброник статей по дизайну и компьютерной графике. Обзор.

megainformatic - Уроки 3d на delphi directx - Вывод Заставки

Добро пожаловать в систему управления сайтом megainformatic cms

megainformatic - Создание эскиза и макета страницы сайта

megainformatic - Верстка созданного макета

megainformatic - Добавление модулей обеспечивающих минимально необходимый функционал

megainformatic - Основы добавления контента на сайт, управления и поддержки сайта

megainformatic - Проверка работы сайта, установка на хостинг

megainformatic - Основы продвижения созданного сайта

megainformatic - Создание шаблонов

megainformatic - Создание интернет-магазина

megainformatic - Музыкальные миры - композиция Морозное утро - 10 версий

ЛЕТО

megainformatic - Нечто Необъяснимое - пре релиз

megainformatic cms admin

megainformatic cms admin

megainformatic - Основы создания 3d игр - проект Тайны Морских Глубин

megainformatic - уроки delphi directx 8.1 3d - Основы Вращений и Управления камерой

megainformatic cms seo

megainformatic cms admin

megainformatic - Моделируем девушку в 3d - Подготовка 2d-эскиза тела человека

megainformatic cms stat kit

megainformatic cms seo

megainformatic - Теория и практика 3d игр - О Кватернионах

megainformatic - Теория и практика 3d игр - Основы теории векторов

megainformatic - Теория и практика 3d игр - Важные замечания

megainformatic - Моделируем девушку в 3d используя 3ds max - Подготовка к моделированию ноги - готовим ширму

megainformatic - Моделируем девушку в 3d используя 3ds max - Выполняем моделирование ноги

megainformatic - Моделируем девушку в 3d используя 3ds max - Улучшаем созданную модель женской ножки

megainformatic cms stat kit

megainformatic - Подводная лодка и подводный мир

megainformatic - megainformatic cms - Форма для смены шаблонов сайта - модуль template selector

megainformatic cms social

megainformatic cms social Руководство пользователя

megainformatic - megainformatic cms - Форма для смены шаблонов сайта - модуль template selector

модуль слайдера

ТЗ на сайт коллективных покупок

модуль slider

megainformatic cms seo

Поддержка сайтом нескольких языков - модуль multi lang

Поддержка сайтом нескольких языков - модуль multi lang

megainformatic - Моделируем девушку в 3d используя 3ds max - другие статьи сборника статей - обзор

установка нового шаблона в joomla 2.5.4

Описание продукта megainformatic cms social

Описание продукта megainformatic cms social

megainformatic - ТЗ на сайт по аналогии rys-stroi.ru

megainformatic cms groupon

megainformatic - дизайн сайта строительной компании УЛЬТРА-СТРОЙ

megainformatic - Тестирование подключения платежной системы

megainformatic - Выпадающее окно регистрации на сайте

megainformatic - Тестирование подключения к платежной системе с использованием скрипта эмулятора

megainformatic - Модуль для регистрации пользователя на сайте

megainformatic - Код для модуля регистрации пользователя на сайте

megainformatic - Быстрый подсчёт ключевых слов в статье

     
 

Создаем выпадающее меню средствами html + css

В данном уроке мы попробуем создать следующее выпадающее меню - popup menu

 
     
 

Первым делом подключаем к странице файл стилей -

<link rel="stylesheet" href="css/style.css" type="text/css" /> содержимое этого файла находится здесь - css/style.css

 
     
  в котором будем описывать необходимые классы и их свойства, влияющие на оформление нашего меню.  
     
  div#bm_main_container  
     
 

данный класс, описанный как уникальный по его id (о чём свидетельствует знак #) будет задавать у нас контейнер для содержимого страницы

в html опишем его как див -

<div id="bm_main_container">

</div>

 
     
  обратите внимание, что мы указали, что для данного блока див, свойства берутся не из класса (class), а из уникального элемента объявленного как id (#)  
     
  Теперь углубимся в рассмотрение кода для css и html  
     
  div#bm_main_container {
width: 1024px; /* задаем ширину контейнера для страницы 1024 пикселя */
background: #f2f2f2; /* цвет фона для контейнера будет бледно-серый */
margin: 0 auto; /* это нужно для размещения контейнера по центру страницы вне зависимости от ширины экрана */
}
 
     
 

в html внутри блока bm_main_container

<div id="bm_main_container">

<!-- описываем блок, представляющий строку меню -->

<div id="bm_category_container"></div>

</div>

 
     
 

в css добавляем

div#bm_category_container {
float: left; /* прижимаем блок меню к левой границе */
background: #fff; /* задаем белый фон */
width: 100%; /* располагаем меню во всю ширину */
height: 28px; /*высоту строки меню определяем в 28 пикселей */
border-top: 1px dashed #000; /* верхний и нижний бордюр черного цвета, выполненный штрихами*/
border-bottom: 1px dashed #000;
margin-bottom: 10px; /* внешний отступ под строкой меню 10 пикселей */
}

 
     
 

/* пункты меню будут элементами ненумерованного списка, поэтому уточняем их свойства

для самого блока ненумерованного списка - ul

*/

#bm_category_container ul {
margin: 1px 5px; /*внешний отступ сверху и снизу по 1 пикселю, слева и справа - по 5 */
padding: 0; /* без внутренних отступов */
}

/* для каждого из пунктов меню */
#bm_category_container li a {

float: left; /* прижать к левой границе */
display: block; /* отображать блоками - т. е. в начале и конце блока содержимое переносится, если не умещается в заданных размерах */
color: #901e78; /* для пунктов меню задаем пурпурный цвет */
padding: 5px 8px; /* внешние отступы сверху/снизу - 5 пикселей, слева/справа - 8 */
font-weight: bold; /* жирный шрифт */
font-family: Verdana, Geneva, sans-serif; /* определяем написание шрифта */
font-size: 14px; /* размер букв - 14 пиксель */
}

 
     
  в html описываем первый пункт меню и его элементы -  
     
 

<div id="bm_category_container">

<!-- открываем тег ненумерованного списка -->
<ul>

<!-- задаем блок для отображения пункта меню -->
<div id="header_wm">

<!-- подпункты будут ненумерованным списком -->
<ul class="models_wm">
<li>

<!-- описываем ссылку на пункт меню и некоторые дополнительные свойства стиля -->
<a style="text-decoration: none;" href="#">&bull;&nbsp;Пункт меню1</a>

<!-- подпункты будут также ненумерованным списком -->
<ul>

<!-- для упорядочения подпунктов применяем таблицу -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">

<!-- в первой строке выделяем названия столбцов для подгрупп-->
<tr>
<td><li>

<!-- и прописываем их названия -->
<a href="#">Подгруппа1</a>
</li></td>
<td><li><a href="#">Подгруппа2</a></li></td>
<td><li><a href="#">Подгруппа3</a></li></td>
</tr>

<!-- прописываем названия подпунктов меню -->
<tr>
<td><a style="color: #fff; font-weight: normal;" href="#">Подпункт1</a></td>
<td><a style="color: #fff; font-weight: normal;" href="#">Подпункт2</a></td>
<td><a style="color: #fff; font-weight: normal;" href="#">Подпункт3</a></td>
</tr>
<tr>
<td><a style="color: #fff; font-weight: normal;" href="#">Подпункт1</a></td>
<td><a style="color: #fff; font-weight: normal;" href="#">Подпункт2</a></td>
<td><a style="color: #fff; font-weight: normal;" href="#">Подпункт3</a></td>
</tr>
<tr>
<td><a style="color: #fff; font-weight: normal;" href="#">Подпункт1</a></td>
<td><a style="color: #fff; font-weight: normal;" href="#">Подпункт2</a></td>
<td><a style="color: #fff; font-weight: normal;" href="#">Подпункт3</a></td>

<!-- закрываем все открытые теги -->
</tr>
</table>
</ul>
</li>
</ul>
</div>

</ul>

</div>

 
     
  в css описываем следующее -  
     
 

/* последовательно описываем все необходимые свойства для оформления пункта меню и подпунктов */

/* сначала описываем свойства названия пункта меню */

#header_wm .models_wm {
list-style-type: none; /* стиль элемента списка - невидимый */
float: left; /* прижимать элемент к левой границе на странице */
}
#header_wm .models_wm li {

/* прижимать элемент к левой границе на странице */
float: left;

/* положение для элемента - относительное - в данном контексте определяет положение выпадающей вкладки с подменю */
position: relative;
}
#header_wm .models_wm li a {
float: left; /* прижимать элемент к левой границе на странице */
position: relative; /* положение относительное */
font-size: 1.2em; /* размер шрифта 1.2 от ширины буквы M */
color: #901e78; /* цвет пурпурный */
text-decoration: none; /* подчеркивание отключаем */
font-weight: bold; /* шрифт жирный*/
}

/* при наведении указателя мыши на данный пункт меню - */
#header_wm .models_wm li a:hover {
text-decoration: underline; /* включаем подчеркивание */
background: #901e78; /* цвет фона - пурпурный */
color: #fff; /* цвет букв - белый */

}

/* описываем свойства для подпунктов - */
#header_wm .models_wm ul {
list-style-type: none; /* значок элемента списка - отключаем */
display: none; /* показ блока - отключаем */
position: absolute; /* показ блока - положение - абсолютное */

padding: 10px; /* показ блока - положение - абсолютное */
background: url(../image/item1_bg.png); /* фоновое изображения для вкладки подменю, поскольку используем png, то вкладку можно сделать полупрозрачной, использовав полупрозрачное png изображение */
border: 2px #901e78 solid; /* по краям вкладки подменю выводим бордюр, который невидим, т. к. совпадает с цветом фона вкладки */


top: 24px; /* смещение сверху 24 пикселя */
left: -30px; /* смещение слева на -30 пикселей */
z-index: 10000; /* z-порядок с максимальным значением, чтобы вкладка отобразилась поверх остальных блоков страницы */
margin-left: 25px; /* внешний отступ слева 25 пикселей*/
}

/* подпункты меню - */
#header_wm .models_wm ul li {
color: #fff; /* цвет текста названия пункта белый */
width: 180px; /* ширину требуется указать, т. к. ИЕ7 отображает вкладку некорректно */

padding: 5px 0; /* внутренние отступы сверху/снизу - 5 пиксель, слева/справа - 0 */
font: 12px Verdana; /*шрифт - 12 пиксель, Verdana */
float: left;
/* привязка блока к левой границе */

}

/* поскольку подпункты - это ссылки, то нужно задать оформление и для них */

#header_wm .models_wm ul li a {
color: #fff; /* цвет текста названия ссылки белый */
font: 12px Verdana; /*шрифт - 12 пиксель, Verdana */
font-weight:bold; /* шрифт выделен жирным */
float: none; /* привязка блока нет */
}

/* при наведении указателя мыши на подпункт - */

#header_wm .models_wm ul li a:hover {
color: #ccc;
/* делаем цвет подпункта серым */
float: none; /* привязку убираем */
text-decoration: none; /* подчеркивание убираем */
}

/* этот элемент в описании ответствен за отображение вкладки подменю - при наведении указателя мыши на пункт меню активируется показ вкладки подменю представленной тегом ul, и отображается вкладка в виде блока */

#header_wm .models_wm li:hover ul {
display: block;
/* если попробовать закомментировать данное свойство или изменить его значение на другое, то всплывающая вкладка подпункта меню не появится */
}

 
     
  Остальные пункты и подпункты меню реализуются полностью аналогично, с тем лишь отличием, что для них устанавливаются собственные особенности - цвет вкладки, названия пунктов и прочее, что нужно.  
     
  Весь исходный код для данного урока Вы найдёте здесь - popup menu (html) и здесь - css/style.css (css).  
     
 

Оставленные комментарии



fle game engine - движок для создания игр
fle game engine - движок для создания игр


Something: Unexplained 2 captive of desires / Нечто: Необъяснимое 2 в плену желаний
Костя Коробкин Комикс Коллекционное издание - 6 комиксов, 81 страница, 220 mp3 треков
megainformatic Размещение баннерной рекламы у нас
визиты
сегодня: 1577
всего: 11549
посетители
сегодня: 235
всего: 22250
Время загрузки: 0,2006