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

Многоуровневое меню №2.

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

 

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

Многоуровневое горизонтальное HTML CSS меню, красивый вариант (№2).

В этой статье будет показано Вам как сделать выпадающее меню на 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 и Zodiac Figure. Дополнительно для Microsoft Internet Explorer: Webdings и Wingdings, для остальных браузеров разработанный автором шрифт GoodPcSimvol.

В этом примере используется HTML Components to Implement DHTML Behaviors in Script: csshover.htc.

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

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

<body  style="behavior: url(csshover.htc)"}>
<!-- Определение меню и  внедрение Embedded Open Type (EOT)
            и True Type (TTF) шрифтов -->

<style>
#ZodiacMenuPic div {Z-INDEX: 100; POSITION: relative; width:100%}
#ZodiacMenuPic a {text-decoration: none; color: Blue}
#ZodiacMenuPic a:hover {color: Red}
#ZodiacMenuPic ul {margin: 0; padding: 0;
               list-style-type:none; list-style-image:url(''); /* Здесь и далее отключение маркеров */}
#ZodiacMenuPic 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}
#ZodiacMenuPic li ul{list-style-image:url(""); list-style:none; padding:0; margin:0; display: none;
               position:absolute; left:0; top:37pt}
#ZodiacMenuPic li ul li {height:25px; margin:0; text-align: left; background: Khaki;
               list-style-type:none; list-style-image:url("");}
#ZodiacMenuPic li ul li ul {display:none; left:0}
#ZodiacMenuPic li a {display:block}
#ZodiacMenuPic li ul li a:visited {color: DarkKhaki}
#ZodiacMenuPic li:hover ul {display: block;}
#ZodiacMenuPic li:hover {background: Yellow}

#ZodiacMenuPic li:hover li ul,
#ZodiacMenuPic li:hover li:hover li ul {display: none; }

#ZodiacMenuPic li:hover li:hover ul,
#ZodiacMenuPic li:hover li:hover li:hover ul {
               DISPLAY: block; LEFT: 120pt; POSITION: absolute;
               TOP: 4pt; /*2,3 уровень OP,FF*/ }

#ZodiacMenuPic span.ZodiacSimv {font-family: "Zodiac Figure"; font-size: 110%}
#ZodiacMenuPic span.ZodiacMenuHorizont {font-family: "GoodPc Simvol",  Webdings; font-size:110%}
#ZodiacMenuPic span.ZodiacMenuHorizont1 {font-family: "GoodPc Simvol", Wingdings; font-size:75%}

@font-face /* Шрифт переработан автором */
       font-family: GothicRus; font-style: normal;
       font-weight: normal; src: url("http://www.goodpc.narod.ru/img/gotrus.eot");}
@font-face/* Шрифт переработан автором */
       font-family: GothicRus; src: local("GothicRus"), local("GothicRus"),
       url("http://www.goodpc.narod.ru/img/GothicRus.TTF") format("truetype");}
@font-face { /* Шрифт разработан автором */
      font-family: Zodiac Figure; font-style: normal; font-weight: normal;
      src: url("http://www.goodpc.narod.ru/img/ZodiacFigure.eot");}
@font-face { /* Шрифт разработан автором */
      font-family: Zodiac Figure; src: local("Zodiac Figure"),local("ZodiacFigure"),
      url("http://www.goodpc.narod.ru/img/ZodiacFigure.ttf") format("truetype");}
@font-face { /* Шрифт разработан автором */
      font-family: GoodPc Simvol; src: local("GoodPc Simvol"),local("GoodPcSimvol"),
      url("http://www.goodpc.narod.ru/img/GoodPcSimvol.ttf") format("truetype");}
</style>
<!-- Вызов новых (дочерних) страниц, в одном и том же окне.-->
<script language=javascript>

function OpNewWin(oPageUrl) {// Открыть новое окно
      MyOpWin=window.open(oPageUrl,"WinFirstName")
      MyOpWin.focus() // Окно на передний план
      window.event.returnValue = false
}
</script>
<!-- Собственно структура меню.-->
<div class=ZodiacMenuPic id=ZodiacMenuPic>
<ul>
     <li><a href="./"><span class="ZodiacMenuHorizont">H</span> Домой</a></li>
     <li><a onclick="OpNewWin(this.href)" target="_top"
                    href ="http://fotki.yandex.ru/users/goodpc/albums/">Фотоальбомы автора
                    <span class="ZodiacMenuHorizont1">&Uacute;</span></a>
       <ul>
            <li><a onclick="OpNewWin(this.href)" target="_top"
                    href ="http://www.goodpc.narod.ru/other/zodiac/index.htm">Зодиакальные созвездия
                    <span class="ZodiacMenuHorizont1">&Oslash;</span></a>
               <ul>
                  <li><a onclick="OpNewWin(this.href)" target="_top"
                            href ="http://www.goodpc.narod.ru/other/zodiac/oven.htm">
                            <span class="ZodiacSimv">a</span> Овен</a></li>
                  <li><a onclick="OpNewWin(this.href)" target="_top"
                            href ="http://www.goodpc.narod.ru/other/zodiac/telec.htm">
                            <span class="ZodiacSimv">b</span> Телец</a></li>
                  <li><a onclick="OpNewWin(this.href)" target="_top"
                            href ="http://www.goodpc.narod.ru/other/zodiac/bliznec.htm">
                            <span class="ZodiacSimv">c</span> Близнецы</a></li>
                  <li><a onclick="OpNewWin(this.href)" target="_top"
                            href ="http://www.goodpc.narod.ru/other/zodiac/rak.htm">
                            <span class="ZodiacSimv">d</span> Рак</a></li>
                  <li><a onclick="OpNewWin(this.href)" target="_top"
                            href ="http://www.goodpc.narod.ru/other/zodiac/lev.htm">
                           <span class="ZodiacSimv">e</span>  Лев</a></li>
                  <li><a onclick="OpNewWin(this.href)" target="_top"
                    href ="http://www.goodpc.narod.ru/other/zodiac/deva.htm">
                            <span class="ZodiacSimv">f</span> Дева</a></li>
                  <li><a onclick="OpNewWin(this.href)" target="_top"
                            href ="http://www.goodpc.narod.ru/other/zodiac/vesi.htm">
                            <span class="ZodiacSimv">g</span> Весы</a></li>
                  <li><a onclick="OpNewWin(this.href)" target="_top"
                            href ="http://www.goodpc.narod.ru/other/zodiac/scorpion.htm">
                            <span class="ZodiacSimv">h</span> Скорпион</a></li>
                  <li><a onclick="OpNewWin(this.href)" target="_top"
                            href ="http://www.goodpc.narod.ru/other/zodiac/strelec.htm">
                            <span class="ZodiacSimv">i</span> Стрелец</a></li>
                  <li><a onclick="OpNewWin(this.href)" target="_top"
                            href ="http://www.goodpc.narod.ru/other/zodiac/kozerog.htm">
                            <span class="ZodiacSimv">j</span> Козерог</a></li>
                  <li><a onclick="OpNewWin(this.href)" target="_top"
                            href ="http://www.goodpc.narod.ru/other/zodiac/vodolei.htm">
                            <span class="ZodiacSimv">k</span> Водолей</a></li>
                  <li><a onclick="OpNewWin(this.href)" target="_top"
                            href ="http://www.goodpc.narod.ru/other/zodiac/ribi.htm">
                            <span class="ZodiacSimv">l</span> Рыбы</a></li>
                 <li><a onclick="OpNewWin(this.href)" target="_top"
                           href ="http://www.goodpc.narod.ru/other/zodiac/zmey.htm">
                          <span class="ZodiacSimv">z</span> Змееносец</a></li>
              </ul></li>
       <li>
<a onclick="OpNewWin(this.href)" target="_top"
                    href="http://www.goodpc.narod.ru/fotki/zodiac.htm">
                    <span class="ZodiacMenuHorizont">&#158;</span> Рисунки знаков Зодиака</a></li>
     </ul></li>
    <li><a onclick="OpNewWin(this.href)" target="_top"
                    href="http://www.goodpc.narod.ru/fotki/photoshop.htm">
                    <span class="ZodiacMenuHorizont">&#159;</span> Шаблоны Photoshop</a></li>
</ul>

</div>
<!-- Конец меню.-->
</body>

8

 

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

 

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

To be continue...


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




В Начало Страницы:
Многоуровневое меню №2”.

G

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

×µ

For Not Commercial Use !!

µØ

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

+


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