Прямо в Локальной Сети, Intranet или Internet !!

Горизонтальное простое меню.

 
 
Добавьте страницу
“Горизонтальное простое меню ”
в Избранное !!
Установите локальную версию goodpc.zip

 

HTML МенюГоризонтальное простое меню Горизонтальное красивое менюМногоуровневое меню №1Многоуровневое меню №2Листинг csshover.htc

Горизонтальное HTML CSS меню, простой вариант.

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

В этой статье будет показано Вам как сделать выпадающее меню на CSS . Преимущества такого меню думаю очевидно. Самое главное из них – это то, что такое меню будет работать при выключенном Java Script в браузере. Благодаря стилям CSS и свойству :hover наше меню оживет. Internet Explorer обрабатывает :hover только для ссылок, поэтому понадобится еще маленькая функция на javascript для имитации :hover для других элементов.

Кроме всего автор использует встроенные шрифты. Начиная с Firefox 3.5, Google Chrome 2, Opera 10 и Safari 3.1 стало возможным использовать в этих браузерах CSS-правило @font-face. На данный момент эти браузеры обрабатывают почти любой шрифт форматов OTF и TTF без необходимости конвертации в защищённый формат EOT. Это существенное отличие от Internet Explorer, который поддерживает использование шрифтов только в формате EOT.

Подробнее смотри о встроенных шрифтах: Embedded OpenType Fonts... На этой странице Вы найдёте достаточно большое количество разнообразных шрифтов.

В этом примере используются шрифт: Gothic Rus.

Исходный код вы можете найти в Zip архиве, файл menu/gorithont_menu.htm. 

Листинг меню.

<!-- Определение меню и  внедрение Embedded Open Type (EOT)
            и True Type (TTF) шрифтов -->

<style>
#ZodiacMenu div {Z-INDEX: 100; POSITION: relative; width:100%}
#ZodiacMenu a {text-decoration: none; color: Blue}
#ZodiacMenu a:hover {color: Red}
#ZodiacMenu ul {margin: 0; padding: 0;
               list-style-type:none; list-style-image:url(''); /* Здесь и далее отключение маркеров */}
#ZodiacMenu li{border-style:outset; height:38pt; border-width:1px; font-family: GothicRus, Arial;
               font-size:16pt;float:left; padding:0; margin:0; width:120pt; text-align:center; position:relative;
               list-style-type:none; list-style-image:url(''); background-color: Khaki}
#ZodiacMenu li ul{list-style-image:url(""); list-style:none; padding:0; margin:0; display: none;
               position:absolute; left:1; top:30pt}
#ZodiacMenu li ul li {height:25px; margin:0; text-align:left; background: Khaki;
               list-style-type:none; list-style-image:url("");}
#ZodiacMenu li a {display:block}
#ZodiacMenu li ul li a:visited {color: DarkKhaki}
               /* Здесь и далее переменная GoodPC используется для управления IE */
#ZodiacMenu li:hover ul, #ZodiacMenu li.GoodPC ul{display:block;}
#ZodiacMenu li:hover, #ZodiacMenu li.GoodPC{background: Yellow}< @font-face /* Шрифт переработан автором */
       font-family: GothicRus; font-style: normal;
       font-weight: normal; src: url("img/gotrus.eot");}
@font-face/* Шрифт переработан автором */
       font-family: GothicRus; src: local("GothicRus"), local("GothicRus"),
       url("mg/GothicRus.TTF") format("truetype");}
</style>
<!-- Вызов новых (дочерних) страниц, в одном и том же окне.-->
<script language=javascript>
function OpNewWin(oPageUrl) {// Открыть новое окно
      MyOpWin=window.open(oPageUrl,"WinFirstName")
      MyOpWin.focus() // Окно на передний план
      window.event.returnValue = false
}
</script>
<!-- Собственно структура меню.-->
<div class=ZodiacMenu id=ZodiacMenu>
<ul>
     <li><a href="./">Домой</a></li>
     <li><a onclick="OpNewWin(this.href)" target="_top"
                    href ="zodiac/index.htm">Зодиакальные созвездия</a>
       <ul>
          <li><a onclick="OpNewWin(this.href)" target="_top"
                    Овен</a></li>
          <li><a onclick="OpNewWin(this.href)" target="_top"
                    Телец</a></li>
          <li><a onclick="OpNewWin(this.href)" target="_top"
                    Близнецы</a></li>
          <li><a onclick="OpNewWin(this.href)" target="_top"
                    Рак</a></li>
          <li><a onclick="OpNewWin(this.href)" target="_top"
                    Лев</a></li>
          <li><a onclick="OpNewWin(this.href)" target="_top"
                    Дева</a></li>
          <li><a onclick="OpNewWin(this.href)" target="_top"
                    Весы</a></li>
          <li><a onclick="OpNewWin(this.href)" target="_top"
                    Скорпион</a></li>
          <li><a onclick="OpNewWin(this.href)" target="_top"
                    Стрелец</a></li>
          <li><a onclick="OpNewWin(this.href)" target="_top"
                    Козерог</a></li>
          <li><a onclick="OpNewWin(this.href)" target="_top"
                    Водолей</a></li>
          <li><a onclick="OpNewWin(this.href)" target="_top"
                    Рыбы</a></li>
          <li><a onclick="OpNewWin(this.href)" target="_top"
                    Змееносец</a></li>
      </ul>
    </li>
    <li>
<a onclick="OpNewWin(this.href)" target="_top"
                    href="fotki/zodiac.htm">Рисунки знаков Зодиака</a></li>
    <li><a onclick="OpNewWin(this.href)" target="_top"
                    href="fotki/photoshop.htm">Шаблоны Photoshop</a></li>
</ul>

</div>
<!-- Конец меню.-->
<!-- Программа управления Меню для IE.-->
<script language=javascript>
// Объект GoodPC см. Стиль
jsHoverZodiacMenu = function() {
     var MenuElement = document.getElementById("ZodiacMenu").getElementsByTagName("li");
     for (var i=0, len=MenuElement.length; i<len; i++) {
          MenuElement[i].onmouseover=function() { this.className+="GoodPC"}
          MenuElement[i].onmouseout=function() { this.className=this.className.replace(" GoodPC", "")}
     }
}
<!-- Активировать Обработчик Меню для IE. -->
if ((navigator.appVersion.indexOf("MSIE") > 0)) jsHoverZodiacMenu()
</script>

8

 

Щёлкните (clik) и Вы перейдёте к Комментариям и пояснениям, а при нажатой клавише Alt в начало страницы “Горизонтальное простое меню”.

 

Комментарии и Пояснения.

To be continue...


HTML МенюГоризонтальное простое меню Горизонтальное красивое менюМногоуровневое меню №1Многоуровневое меню №2Листинг csshover.htc




В Начало Страницы:
Горизонтальное простое меню”.

G

Copyright © 1997 - 2017. By: Апарышев Валерий. All rights reserved.

×µ

For Not Commercial Use !!

µØ

Пошлите Автору Пожалуйста Письмо !!

+


Яндекс.Метрика