ria pc game
translate to English   translate to Chinese
fle game engine - движок для создания игр
fle game engine - движок для создания игр


Balls and holes PC game / Balls and Holes PC игра
Вакансии
Игродельня
Сегодня
22 февраля 2019 22:02
Вход Регистрация Забыли пароль ?

megainformatic - Костя Коробкин - В гостях у тёти Светы (kk as) - онлайн комикс - страница 10
Костя Коробкин - В гостях у тёти Светы (kk as) - онлайн комикс - страница 10 Онлайн-комикс Костя Коробкин - В гостях у тёти Светы - интерактивный комикс (kk as). - Как здесь красиво. - И подозрительно тихо.
подробнее...

Теги создание сайтов, создание игр, дизайн, игры, информатика, уроки photshop, php, c++, музыка, delphi, cms, робосайт
Статьи сайта
megainformatic - DirectX 9c - Изучаем пример MultAnimation

megainformatic - megainformatic cms Система Управления Контентом

megainformatic - Темы для WordPress

megainformatic - Что нужно для создания собственного сайта ?

megainformatic - Макет дизайна Вашего сайта

скачать megainformatic cms

megainformatic - Итоги 2010 года

megainformatic - Что нужно для создания собственного сайта ?

megainformatic - как создать инсталлятор для собственной cms

megainformatic - Новости - страница 2

Нововведения в megainformatic cms

Web Администрирование

Уроки Верстки

Система автоматизированной е-майл рассылки

Система автоматизированной е-майл рассылки

megainformatic - Выгрузка файла на сайт

megainformatic - выпадающее меню на html и css

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

Краеугольная особенность работы Web-form на примере смены состояния checkbox

Технологии WEB

Технологии WEB - AJAX-запросы

Часто Задаваемые Вопросы

Продукты

Проблемы с кодировками при отображении страниц

игра Нечто: Необъяснимое Нить Накала - "в плену желаний"

Система Автоматизации Доставки Электронных Заказов megainformatic cms e-pro

megainformatic cms e-pro Автоматизация Обработки Уведомлений о Заказах по партнерским программам

megainformatic cms e-pro Автоматизация Обработки Уведомлений о Заказах по партнерским программам

webinformatic: Музыкальная страничка трэкера

megainformatic - Создание музыки и звука

webinformatic: Создание музыки и звука: урок 2

megainformatic - Создание музыки и звука: урок 3 - настройка Impulse Tracker для работы в WinXP

megainformatic - Создание музыки и звука: урок 4 - Введение в Mod Plug Tracker

megainformatic - Создание музыки и звука: урок 5 - Первая композиция в Mod Plug Tracker

megainformatic - Создание музыки в Impulse Tracker 2.14 - урок 6 - Ввод Нот

megainformatic - Создание музыки в Impulse Tracker 2.14 Первая мелодия

megainformatic - Создание музыки в Impulse Tracker 2.14 Настройка параметров сэмплов

megainformatic - Создание музыки и звука: теория и практика создания трэкерской музыки

megainformatic - Инструкция по оплате услуг средствами WebMoney

Основы работы в Microsoft Visual Studio 2008 и DirectX 9 (DX SDK Aug 2008)

Введение в программирование игр на С++ для платформы DirectX 9 - Первый старт

Введение в программирование игр на С++ для платформы DirectX 9 - Меняем иконку приложения

Введение в программирование игр на С++ для платформы DirectX 9 Добавляем другую модель

Введение в программирование игр на С++ для платформы DirectX 9 Программирование игр в directx. Hello, World!

Введение в программирование игр на С++ для платформы DirectX 9 Разбираем конструкции языка C++ на примере работы в Microsoft Visual Studio 2008

Разбираем конструкции языка C++ на примере работы в Microsoft Visual Studio 2008 - Урок 1 Основные операторы языка C++

Разбираем конструкции языка C++ на примере работы в Microsoft Visual Studio 2008 - Урок 1 Основные операторы языка C++ (часть 2)

Урок 2 Написание Win32-приложений. Обзор стартового кода Win32-приложения. Добавление ресурса текстовая строка

Урок 3 Создание Win32-приложений. Создание меню и простых диалоговых окон.

Урок 4 Создание Win32-приложений. Стандартные диалоги. Изучение сопутствующих конструкций языка. Консольные Win32-приложения. Указатели. Ссылочный тип. Массивы.

Урок 4 часть 2 Win32. Диалог выбора цвета, смена цвета фона окна приложения

Написание приложения DirectX9c + MFC в среде MSVS 2005

megainformatic - Создание компьютерных игр на основе DirectX в среде Delphi 6, 7

megainformatic - Создание компьютерных игр на основе DirectX в среде Delphi 6, 7 - Почему избраны DX8 и Delphi ?

megainformatic - Основы IDirectMusic8 в среде Delphi6-7

megainformatic - Основы DirectInput8 в среде Delphi 7

подробнее

     
 

Вы можете оплатить заказанный Вами продукт следующими способами

Формы оплаты:

- Сбербанк России

- WebMoney на кошелек R423715778532;

- MoneyMail на адрес megainformatic@mail.ru;

Если данные формы оплаты Вам не подходят - напишите на megainformatic@mail.ru каким способом Вы хотели бы оплатить покупку.

Также Вам нужно отправить письмо на адрес megainformatic@mail.ru с указанием названия заказываемого товара.

После подтверждения оплаты в течение 1-3 дней будет выполнена электронная доставка заказанного Вами товара на Ваш e-mail с которого Вы отправили письмо-заявку.

 
     
  Спасибо за проявленное внимание !  
     
подробнее

     
 

Игра ВЕСЕЛЫЙ БУКВОЕЖКА

 
     
 
 
 


во втором видео - показ всей игровой локации (несколько игровых экранов)

 
 
 
 

 

 

 

150 руб.
 
 
 
 
[downloads:27]
 
 

Веселый Буквоежка, игра, интерактивный скриншот - наведите указатель мышки на нужный элемент скриншота игры и увидите подсказку по нему.



Веселый Буквоежка, игра, интерактивный скриншот - наведите указатель мышки на нужный элемент скриншота игры и увидите подсказку по нему.

Ниже представлены скриншоты из вступительного комикса, скрины и концепт-арт.

 
  поиски начинаютсяЛукьяныч гибнетночь  
     
  Жора, Щукин и Лукьяныч отправляются на поиски Гали. Они идут вглубь таинственного места, вслед за Лукьянычем. Лукьяныч гибнет. Героям удается найти Галю и вырвать его из рук Сольвейга - человека, ставшего опасным обитателем свалки.  
     
  последняя схваткавозникновение  
     
  Приближается ночь. Силы на исходе. Герои готовы погибнуть. Жора не желает сдаваться. Он вступает в последнюю схватку. Но тут в пламени огня появляется новый герой. Он вырывает друзей из плена опасных пауков и прячет в безопасном месте.  
     
  Веселый Буквоежка - ВПЕРЕД!в доме у Бабы Яги  
     
  Герои нашли убежище и долгожданный отдых. Но нашему герою - Веселому Буквоежке - пока рано успокаиваться. Ему предстоит много дел, касающихся расчистки и озеленения территории, борьбы с опасными существами, поиска вещей и находок и главное - оказание всяческой помощи спасенным.  
     
  дождьпоиск находок  
     
  Свалка хранит следы былых времен. Нужно сделать шаг и сдвинуть зону на путь перемен. И тогда герои найдут ответ на все свои вопросы и отыщут, наверное, таинственное Озеро Желаний.  
     
 

 

 

 

 
 
     
  Системные требования: Windows 98SE/2000/Me/XP/Vista/Seven/ DirectX9c / Pentium III 1000 MHz / 128 Mb RAM / 32 Mb Video RAM / около 130 Mb свободного места на HDD / DirectX-совместимая звуковая карта / клавиатура, мышь  
     
  ночные гости  
     
  с наступлением ночи опасность возрастает  
     
  расчистка территории  
     
  Веселый Буквоежка показывает что нужно делать с этим мусором  
     
  зелень требует полива  
     
  посаженные деревья нуждаются в поливе  
     
  сделаю-ка я из тебя доброго  
     
  Буквоежка борется с опасными злыми пауками, а добрые помогают ему  
     
  Баба Яга опять спорит со своим Котом  
     
  У Бабы Яги снова споры  
     
  Веселый Буквоежка - экран главного менюВеселый Буквоежка - начало  
     
  История создания проекта "Веселый Буквоежка"  
     
  Игра повествует о приключениях произошедших на заброшенной территории
завода игрушек, превратившейся в обширную городскую свалку и
получившую название "Зона". В Зоне пропадает девочка Галя,
а на её поиски отправляются несколько смельчаков и пропадают
сами. Параллельно этому возникает новая вероятностная цепочка,
частью которой является персонаж по имени Веселый Буквоежка.
Это и есть Вы, т. е. игрок, в лице главного героя.

Вам предстоит начать борьбу со свалкой и её порождениями.

 
     
  Веселый Буквоежка - экран загрузкиВеселый Буквоежка - ищем находки  
     
  Веселый Буквоежка - в хранилище вещейВеселый Буквоежка - все находки  
     
  Несколько слов об игре

Мы попадаем в увлекательный, живой мир, в котором постоянно что-то происходит, то появляются странные существа, то какой-то летающий мусор, или вдруг находим какую-нибудь вещь, либо находку в земле. Находки могут быть разные - пустые, с секретом, призом или антипризом, и с буквой. Буквы можно подбирать и укладывать на расчищенной территории, выкладывая простые слова. Слово может состоять из 2х, 3х или 4х букв, по вертикали, горизонтали или диагонали сверху-вниз-наискосок.

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

Если вдруг Вы сложили слово, но оно не исчезло - не печальтесь, просто этого слова пока нет в базе слов.

Нужно выйти из игры (ваша текущая игра будет сохранена) - нажав Esc или выбрав мышью кнопку меню на мини-панели, которая расположена в левом верхнем углу игрового экрана. Открыть папку, куда Вы установили игру (по-умолчанию C:\Program Files\Веселый Буквоежка\) и открыть подпапку Media, а внутри неё подпапку text. Здесь Вы увидите файл words_from_plates.txt - это обычный текстовый файл, представляющий из себя список возможных слов.

Откройте этот файл при помощи программы Блокнот или любой другой, которая может работать с текстовыми файлами. Добавьте новое слово в конец этого файла. После старта игры программа автоматически отсортирует слова по-алфавиту. Помните только, что слова в базе слов должны быть из 2-4х букв - не более !!!

 
     
  Особенности игры:

- объемный 2D-мир, горизонтальный скроллинг в обоих направлениях;

- прямое управление главным героем, от третьего лица;

- вещи - специализированные предметы;

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

- секретные места - попасть туда можно при использовании секрета;

- явления природы: дождь - является одним из секретов;

- злые существа - пауки, атакующие мусором;

- Веселый Буквоежка, атакующий СМЕХОМ, бросающий пауков;

- развивающий компонент: из букв нужно складывать слова.

 
     
  Веселый Буквоежка - в лесуВеселый Буквоежка - возникновение  
     
  Веселый Буквоежка - дождьв доме Бабы Яги  
     
 

Сведения о технологиях

Веселый Буквоежка Версия 0.1 включает:

- Игровой процесс: находки, складывание слов, призы, атаки пауков,
отражение атак, секреты;

- Игровая оболочка: загрузчик, вступление, главное меню, описания, настройки;

- Инструменты: редактор сцен, сборщик локаций, утилита Coords2D;

Особенности:

полностью локализуемая логическая аркада без ограничений возраста,
написана на C++/DirectX 9c на собственном 2D-движке Fle_cpp DirectX Engine v. 0.1
от 12.06.2010

 
     
  Заметки разработчика - рисуем паука  
     
 

 

 

 

 
 
     
подробнее

Как создать игру - Создание игровых панелей и индикаторов

[к содержанию]

В любой или почти любой игре Вы встретите некоторое количество игровых панелей или различных игровых индикаторов.

игра Веселый Буквоежка - вверху мы видим игровую панель и несколько индикаторов

На данном скриншоте видно в левом верхнем углу небольшая зеленая панелька, на которой есть иконки "ГЛАЗ" и "МЕНЮ". В игре эти кнопки выполняют какие-либо действия, например, "ГЛАЗ" может скрывать все панели и снова отображать их, а "МЕНЮ" позволяет выйти в ГЛАВНОЕ МЕНЮ игры.

Таким образом игровые панели могут содержать элементы управления - кнопки или что-то еще, позволяющие выполнять какие-либо действия в игре. Например во всех известных играх серии Starcraft игровые панели практически заменяют собой клавиатуру - т. е. все действия в игре выполняются исключительно с помощью игровой панели путём клика мышью на её элементах.

Здесь же мы видим целый ряд игровых индикаторов - "жизненная сила", "карман" (в нём на скриншоте находится лопата), "магическая энергия" (показано значение 400), отсчёт игрового времени (0:13:35), "бодрость".

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

Иными словами индикатор и игровая панель - это просто какое-то статичное или анимированное программным путём изображение в игре.

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

Рассмотрим какой код необходим для управления высотой столбика индикатора жизненной силы.

Для начала нам понадобится минимально необходимый код для создания игрового 2d приложения на базе directx 9c.

[downloads:30]

Данное приложение (min_2d_game_app) представляет собой набор .h и .cpp модулей, собранных в проект MSVS 2005, пригодный для сборки с DX SDK Aug 2008. Все необходимые исходные файлы прилагаются.

Вы можете скачать данный проект себе, распаковать и попробовать запустить файл Coords2D.exe расположенный в min_2d_game_app\Coords2D\Coords2D\Coords2D\

Для самостоятельной сборки проекта и экспериментов с кодом вам понадобится среда разработки MSVS 2005 или выше, а также DX SDK Aug 2008.

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

приложение Coords2D в действии - min_2d_game_app - минимально необходимый код для создания игрового 2d приложения на базе directx 9c Суть решения заключается в следующих шагах:

1) Открыть проект Coords2D из папки min_2d_game_app в среде MSVS 2005;

2) Разместить файл изображения индикатора в папке min_2d_game_app\Coords2D\Coords2D\Coords2D\Media\textures\indicator\

3) Добавить данный файл + его параметры в список загружаемых - для этого открыть текстовый файл

min_2d_game_app\Coords2D\Coords2D\Coords2D\Media\textures\tex_list.txt

и в самое начало файла добавить строчку -

indicator\live_power_end.tga; -1.0f; 0.54f; 0.7f; 1.0f; -1.0f; 68; 128; 0; 0; 1; 0.0f; 0.0f;

Назначение параметров вы можете узнать из readme.txt который входит в состав min_2d_game_app (описание к утилите Coords2D).

4) Открыть модуль Coords2D.cpp и в нём найти метод void CD3DGameApp::AnimSprites()

метод AnimSprites выполняет анимацию всех спрайтов класса CD3D9Sprite - это все объекты, которые загружаются из файла tex_list.txt

Самым первым из них будет объект индикатора (при условии что вы выполнили шаг 3), тогда будет корректным использовать такой код -

void CD3DGameApp::AnimSprites()

{

if ( SpritesArray == NULL )

return;



if ( SpritesArray->GetCount() == 0 )

return;



for ( int i = 0; i < SpritesArray->GetCount(); i++ )

{



/* получаем объект спрайта - для того чтобы проверить не является ли он

индикатором жизненной силы - т. е. объект с индексом 0 в массиве */

CD3D9Sprite* Sprite = (CD3D9Sprite*)SpritesArray->GetAt(i);

if ( i == 0 ) //проверяем какой сейчас был выбран элемент из массива

{



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

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

Sprite->Height = (int)(g_d3dApp.m_CursorPos.y * 200.0f);



}



AnimateSprite(i, m_fElapsedTime);





}



}



Поскольку указатель мыши имеет координатное пространство для оси Y от 1.0 до -1.0, то мы умножаем значение на 200.0f (float), а затем приводим к типу int, т. к. высота Height у спрайта должна быть целым числом.

Теперь высота индикатора в вашем d3d-приложении будет меняться при перемещении указателя мыши по оси Y.

В качестве эксперимента попробуйте задавать вместо 200.0f другие значения, перекомпилировать приложение и снова запускать.

Как видите вывод индикатора в игре не представляет теперь для Вас особой сложности.

Самое главное придумать при каких условиях и каким образом он будет изменяться. Например в игре ВЕСЕЛЫЙ БУКВОЕЖКА индикатор жизненной силы угасает при столкновении с пауками. А если жизненная сила достигнет 0 значения, игра завершается как проигранная.

[к содержанию]

подробнее

     
     
  Добро пожаловать в систему управления сайтом megainformatic cms !  
     
  [к содержанию] [назад] [далее]  
     
 

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

 
     
 

Когда вы обращаетесь к вашему локальному сайту Вы пишете в адресной строке браузера -

http://localhost/megainformatic/

 
     
 

При этом такой запрос аналогичен следующему -

http://localhost/megainformatic/index.php

 
     
 

Т. е. по сути мы в первом случае обращаемся к странице index.php.

А как обратиться к другим страницам ? И как узнать сколько всего на сайте страниц ?

 
     
 

Ну, не торопитесь с вопросами. Давайте по-порядку.

Как обратиться к другим страницам ?

А вот как -

http://localhost/megainformatic/index.php?page=4

 
     
 

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

?page=4

Т. е. мы указываем параметр page равный значению 4. Меняя числовое значение вы попадете на указанную страницу. А php код внедренный в страницу index.php в нашем предыдущем уроке устроен таким образом, что если Вы даже обратитесь к несуществующей странице, то будет отображена страница по-умолчанию, т. е. с параметром ?page=1

http://localhost/megainformatic/index.php?page=1

 
     
 

Как узнать сколько всего страниц на сайте?

Можно это сделать несколькими способами.

1) Можно открыть базу данных сайта, таблицу papers и увидеть сколько там добавлено страниц;

2) Можно вручную перебирать значения параметра page и наблюдать за изменением содержимого страницы сайта, как только содержимое перестанет изменяться и будет похоже на страницу по-умолчанию, значит вы добрались до последней или еще не существующей страницы;

3) Есть специальный модуль - map.php, он же используется для облегчения индексации сайта поисковым роботом.

Просто наберите в адресной строке -

http://localhost/megainformatic/map.php

 
     
 

И вы получите список всех страниц сайта. Это карта сайта. Можно посмотреть код файла map.php. Суть его работы состоит в выборке всех описаний страниц из базы данных сайта и выводе в виде списка ссылок на эти страницы.

По количеству этих ссылок вы легко можете определить сколько страниц есть на вашем сайте. В нашем демонстрационном сайте пока всего 7 страниц.

 
     
 

Как же добавлять новые страницы на свой сайт ?

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

Добавление новой страницы включает всего 3 шага:

1) Создание в html-редакторе html файла страницы - ФАЙЛ ДЛЯ РЕДАКТИРОВАНИЯ КОНТЕНТА. Пример кода такого файла вы можете найти заглянув в папку megainformatic/papers/maket

там есть файл maket.html

откройте его в html-редакторе и посмотрите. Самое главное - это чтобы контент вашей страницы находился в таблице, иначе данный демо-сайт не сможет вывести его корректно.

2) на основе содержимого файла maket.html (мы возьмем его для примера, у вас конечно будет свой файл) нужно создать текстовый файл maket.txt - ФАЙЛ КОНТЕНТА

далее нужно взять весь код из файла maket.html и скопировать его в файл maket.txt

после этого в файле maket.txt нужно убрать код, касающийся тегов заголовка и тела документа

т. е. из текстового файла maket.txt уберите код -

 
     
  <!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
 
     
 

</head>

<body>

 
     
 
</body>
</html>
 
     
 

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

papers/maket/maket.txt

 
     
 

3) Нам остается добавить описание файла контента в базу данных сайта -

заходим в админку сайта - в браузере набираем -

http://localhost/megainformatic/holder/

Если Вы заходите в админку в первый раз вам нужно придумать и ввести новый пароль администратора. Обязательно запомните пароль, т. к. он хранится в зашифрованном виде. Если вдруг забудете пароль - просто удалите файл holder/enter.txt

после этого зайдите в админку и задайте новый пароль

 
     
 

Находясь в админке выберите ссылку -

Добавить новую страницу на сайт

Введите идентификатор страницы pageid - если у Вас уже есть например 7 страниц, значит вводите число 8

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

Введите ссылку на Файл контента страницы- (в нашем примере для файла maket.txt нужно ввести - papers/maket/maket.txt) - как видите путь к файлу задается относительно корневой папки сайта

 
     
  Теперь жмите кнопку ДОБАВИТЬ. И дело сделано - новая страница появится на вашем сайте !  
     
  Изменять содержимое страниц оцень легко - просто повторите шаги 1 и 2. На шаге один внесите нужные исправления в html-файл контента страницы, а на шаге 2 просто скопируйте измененный вариант в текстовый файл контента страницы.  
     
  Как удалить ненужные страницы с сайта ? Я думаю это тоже не такой уж сложный вопрос - воспользуйтесь phpMyAdmin ( phpMyAdmin - администрирование СУБД MySQL) и удалите из базы данных ненужные страницы и файлы их контента. Однако советую Вам оставлять непрерывный блок страниц. К примеру если у Вас есть 100 страниц и Вам вдруг надо удалить 88, то вместо этого перенесите описание 100й страницы на место 88, а 100ю страницу удалите. Это можно выполнить также через phpMyAdmin.  
     
  [к содержанию] [назад] [далее] далее мы проверим работу нашего сайта и рассмотрим процедуру установки его на хостинге  
     
     
     
 

Создаем выпадающее меню средствами 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).  
     
megainformatic live chat
Начать беседу
X
 

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



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


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