-Рубрики

 -Фотоальбом

Посмотреть все фотографии серии 2017
2017
09:10 24.05.2017
Фотографий: 5
Посмотреть все фотографии серии 2015
2015
09:46 14.04.2015
Фотографий: 5
Посмотреть все фотографии серии 2014
2014
20:36 22.08.2014
Фотографий: 7

 -Цитатник

Блокнот ( Notepad): полезные функции и другие программы - (0)

Блокнот ( Notepad): полезные функции Блокнот (англ. Notepad) — простой текстов...

Ответы на вопросы - (0)

1) нигде 2) blog.ru знает, наверное 3) нельзя 4) нельзя Здесь находятся вопросы

О ЛЮБВИ ... - (1)

О ЛЮБВИ ... О совсем другой любви знаете ли вы? О любви, в которой чудо просыпается внутри,...

Теги в оформлении постов в блоге - (0)

ВСЕ о тегах и оформлении постов Элементарные формы оформления   ...

Help по ЛиРу - (1)

советы по ЛиРу   Что делать, если забыли пароль? Общие вопросы Что та...

 -Видео

Приветствие
Смотрели: 0 (0)
Хочу сказать
Смотрели: 0 (0)
Моя линия жизни
Смотрели: 350 (0)
Это я
Смотрели: 200 (1)

 -неизвестно

 -Поиск по дневнику

Поиск сообщений в Aleksey_Malysh

 -Подписка по e-mail

 

 -Сообщества

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 26.05.2010
Записей: 4842
Комментариев: 96
Написано: 5591

Комментарии (0)

Очень сложное и удобное меню для умных сайтов

Дневник

Пятница, 25 Января 2013 г. 12:11 + в цитатник

 

Малыш Алексей Александрович

Aleksey_Malysh

 

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

HTML– ФРАГМЕНТ КОДА

Echo<<<_START  // Внимание! Эта строка лишняя

<divclass="mm16b">                 

    <div class="mm16">

      <li><a id="mm16ta1" onclick="Vida16('mm16a1', 'mm16ta1')" href="#">Новости</a></li>      

      <li><a id="mm16ta2" onclick="Vida16('mm16a2', 'mm16ta2')" href="#">фотографии</a></li>   

      <li><a id="mm16ta3" onclick="Vida16('mm16a3', 'mm16ta3')" href="#">Блог</a></li>

      <li><a id="mm16ta4" onclick="Vida16('mm16a4', 'mm16ta4')" href="#">Контакты</a></li>

    </div>   

   <div id="mm16a1" class="mm16a1">

        <li><a href="#">Новости11</a></li>

        <li><a href="#">Новости22</a></li>

        <li><a href="#">Новости33</a></li>

        <li><a href="#">Новости44</a></li>

        <li><a href="#">Новости55</a></li>

        <li><a href="#">Новости66</a></li>

        <li><a href="#">Новости77</a></li>

        <li><a href="#">Новости88</a></li>       

   </div>  

   <div id="mm16a2" class="mm16a2"> 

        <li><a href="#">фото11</a></li>

        <li><a href="#">фото22</a></li>

        <li><a href="#">фото33</a></li>

        <li><a href="#">фото44</a></li>

        <li><a href="#">фото55</a></li>

        <li><a href="#">фото66</a></li>

        <li><a href="#">фото77</a></li>

        <li><a href="#">фото88</a></li>       

   </div>

   <div id="mm16a3" class="mm16a3">

        <li><a href="#">Блог11</a></li>

        <li><a href="#">Блог22</a></li>

        <li><a href="#">Блог33</a></li>

        <li><a href="#">Блог44</a></li>

        <li><a href="#">Блог55</a></li>

        <li><a href="#">Блог66</a></li>

        <li><a href="#">Блог77</a></li>

        <li><a href="#">Блог88</a></li>       

   </div>

   <div id="mm16a4" class="mm16a4">

        <li><a href="#">Контакты11</a></li>

        <li><a href="#">Контакты22</a></li>

        <li><a href="#">Контакты33</a></li>

        <li><a href="#">Контакты44</a></li>

        <li><a href="#">Контакты55</a></li>

        <li><a href="#">Контакты66</a></li>

        <li><a href="#">Контакты77</a></li>

        <li><a href="#">Контакты88</a></li>       

   </div> 

</div>

_START// Внимание! Эта строка лишняя

 

FILE.CSS – ФРАГМЕНТКОДА

.mm16b {

            height: 65px;

            width: 950px;

            display: block;

            font-family: arial;

            font-size: 14px;

            position: relative;

            top: auto;

            left: auto;

            background-color: #0F0;

}

#mm16ta1 {

            padding: 0px 10px 20px 10px;

            background-color: #999;

}

#mm16ta2 {

            background-color: #333;

            padding: 0px 10px 20px 10px;

}

#mm16ta3 {

            background-color: #333;

            padding: 0px 10px 20px 10px;

}

#mm16ta4 {

            background-color: #333;

            padding: 0px 10px 20px 10px;

}

.mm16 {

            width: 938px;

            height: auto;

            position: relative;

            top: 2px;

            left: auto;

}

.mm16 li {

            FLOAT: left;

            MARGIN: 0px 5px 0px 5px;

            WIDTH: auto;

            font-size: x-large;

            padding: 0;

            display: inline;

}

.mm16 li A:link {

            COLOR: #CFF;

            TEXT-DECORATION: none;

}

.mm16 li A:visited {

            text-decoration: none;

            color: #CFF;

}

.mm16 li A:hover {

            background-color: #FFF;

            text-decoration: underline;

            color: #F00;

}

.mm16 li A:focus {

            text-decoration: none;

            color: #CFF;

}

#mm16a1 {

            visibility: visible;

 

}

.mm16a1 {

            left: 5px;

            font-size: large;

            top: 38px;

            width: 940px;

            background-color: #999;

            float: left;

            position: absolute;

}

.mm16a1 li {

            FLOAT: left;

            MARGIN: 0px 5px 0px 5px;

            WIDTH: auto;

            font-size: large;

            display: inline;

            padding: 0px 5px 0px 5px;

}

#mm16a2 {

            visibility: hidden;

 

}

.mm16a2 {

            left: 5px;

            font-size: large;

            top: 38px;

            width: 940px;

            position: absolute;

            background-color: #999;

            clear: both;

}

.mm16a2 li {

            FLOAT: left;

            MARGIN: 0px 5px 0px 5px;

            WIDTH: auto;

            font-size: large;

            display: inline;

            padding: 0px 5px 0px 5px;

}

#mm16a3 {

            visibility: hidden;

}

.mm16a3 {

            font-size: large;

            left: 5px;

            top: 38px;

            width: 940px;

            clear: both;

            position: absolute;

            background-color: #999;

}

.mm16a3 li {

            FLOAT: left;

            MARGIN: 0px 5px 0px 5px;

            WIDTH: auto;

            font-size: large;

            display: inline;

            padding: 0px 5px 0px 5px;

}

#mm16a4 {

            visibility: hidden;

 

}

.mm16a4 {

            font-size: large;

            left: 5px;

            top: 38px;

            width: 940px;

            clear: both;

            position: absolute;

            background-color: #999;

}

.mm16a4 li {

            FLOAT: left;

            MARGIN: 0px 5px 0px 5px;

            WIDTH: auto;

            font-size: large;

            display: inline;

            padding: 0px 5px 0px 5px;

}

 

.mm16a1 li A:link , .mm16a2 li A:link, .mm16a3 li A:link, .mm16a4 li A:link {

            COLOR: #FF0;

            TEXT-DECORATION: none

}

.mm16a1 li A:visited , .mm16a2 li A:visited, .mm16a3 li A:visited, .mm16a4 li A:visited {

            text-decoration: none;

            color: #FF0;

}

.mm16a1 li A:hover , .mm16a2 li A:hover, .mm16a3 li A:hover, .mm16a4 li A:hover {

            background-color: Aqua;

            text-decoration: underline;

            color: #F00;

}

.mm16a1 li A:focus, .mm16a2 li A:focus, .mm16a3 li A:focus, .mm16a4 li A:focus {

            background-color: Aqua;

            text-decoration: underline;

            color: #F00;

}

 

FILE.JS – ФРАГМЕНТКОДА

function Vida16(ida, idc)

{

  a1='mm16a1';

  a2='mm16a2';

  a3='mm16a3';

  a4='mm16a4';

  s(a1).style.visibility='hidden';

  s(a2).style.visibility='hidden';

  s(a3).style.visibility='hidden';

  s(a4).style.visibility='hidden';

  s(ida).style.visibility='visible';

  t1='mm16ta1';

  t2='mm16ta2';

  t3='mm16ta3';

  t4='mm16ta4';

  col='#333';

  s(t1).style.backgroundColor=col;

  s(t2).style.backgroundColor=col;

  s(t3).style.backgroundColor=col;

  s(t4).style.backgroundColor=col;

  s(idc).style.backgroundColor='#999';

  return 1;

}

 

 function s(e)

{

   return document.getElementById(e);

}

 

 

Рубрики:  Программирование

Метки:  

 Страницы: [1]