Создал выплывающее меню, а оно почему-то не работает.

Тема в разделе "HTML, CSS, XML, JavaScript", создана пользователем LazyBoy, 2 дек 2010.

  1. LazyBoy

    LazyBoy Гость

    Помогите пожалуйста. само меню нарезал в фотошопе. между картинок прогалов нет, но само меню не выпадает!!!
    <div class="sp-wrap"><div class="sp-head-wrap"><div class="sp-head folded clickable">Код</div></div><div class="sp-body"><div class="sp-content">
    <!--shcode--><pre><code class='html'><html>
    <head>
    <title>Компания Айрон | Главная Страница</title>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    <LINK href="image/logo_mini.jpg" type=ico rel=icon>
    <style>
    body { font-family: verdana, sans-serif; font-size:13px; margin:0px; padding:0px; text-aglin:center;
    background-image: url('images/фон.jpg');}
    .menu { background-images: url('image/фон.jpg'); width:100%; }
    #block_menu
    .punkt {float:left; padding: 0px 0px 0px 0px; background:transparent; position:relative; cursor:pointer; text-align: center; }
    .punkt div {padding:"none";}
    div.list_punkts {background:#797950; position:absolute; top:26px; left:0px;
    display:none; padding:0px; width:230px; border:solid 0px; }
    div.list_punkts div.kont {padding:0px;margin:0px; /*background:#80FF00;*/ }
    div.list_punkts a {text-decoration:none; padding:0px; cursor:pointer; color:#FFFFFF;}
    div.list_punkts div a div.podpunkt { /*background:#AAAAAA;*/ width:100%; padding:0px; margin-top:0px; }
    div.list_punkts div a div.podpunkt div { width:100%;padding:0px 0px 0px 0px; white-space:pre;}
    div.list_punkts div a:hover { background:#000000; }
    div.list_punkts div a:hover div.podpunkt { background:#CCCCCC; color:#000000; }
    .footer_menu { clear:both; }
    </style>
    </head>
    <table id="________01" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td>
    <img src="images/UP_01.jpg" width="85" height="218" alt="">
    </td>
    <td>
    <a href="index.html"><img src="images/UP_02.jpg" width="356" height="218" alt=""></a>
    </td>
    <td>
    <a href="index.html"><img src="images/UP_03.jpg" width="196" height="218" alt=""></a>
    </td>
    <td>
    <a href="contacts.html"><img src="images/UP_04.jpg" width="618" height="218" alt=""></a>
    </td>
    </tr>
    </table>
    <table id="________02" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td>
    <img src="images/DOWN_01.jpg"></td>
    <td>
    <div class="punkt" onMouseOver="overPunkt(this);" onMouseOut="outPunkt(this);"><div><img src="images/DOWN_02.jpg" alt="Авто"></div
    ><div class="list_punkts"><div class="kont">
    <a href="bag.html"><div class="podpunkt"><div>Экспедиционные багажники</div></div></a>
    <a href="rams.html"><div class="podpunkt"><div>Сварка рам (для грузовых)</div></div></a>
    <a href="box.html"><div class="podpunkt"><div>Инструментальные ящики<br/>(для грузовых)</div></div></a>
    <a href="tent.html"><div class="podpunkt"><div>Каркасы под тент</div></div></a>
    <a href="bamp.html"><div class="podpunkt"><div>Силовые бамперы</div></div></a>
    </div></div>
    </div>
    </td>
    <td>
    <div class="punkt" onMouseOver="overPunkt(this);" onMouseOut="outPunkt(this);"><div><img src="images/DOWN_03.jpg" width="212" height="37" alt="Благоустройство территорий"></div
    ><div class="list_punkts"><div class="kont">
    <a href="vorota.html"><div class="podpunkt"><div>Въездные ворота и калитки</div></div></a>
    <a href="detsk.html"><div class="podpunkt"><div>Качели, детские площадки</div></div></a>
    <a href="decor.html"><div class="podpunkt"><div>Декоротивные ограждения</div></div></a>
    <a href="zabor.html"><div class="podpunkt"><div>Изготовление заборов</div></div></a>
    <a href="flower.html"><div class="podpunkt"><div>Цветочницы</div></div></a>
    <a href="scam.html"><div class="podpunkt"><div>Скамейки</div></div></a>
    <a href="resh.html"><div class="podpunkt"><div>Решетки</div></div></a>
    <a href="mang.html"><div class="podpunkt"><div>Мангалы</div></div></a>
    <a href="bes.html"><div class="podpunkt"><div>Беседки</div></div></a>
    <a href="tepl.html"><div class="podpunkt"><div>Теплицы</div></div></a>
    <a href="naves.html"><div class="podpunkt"><div>Навесы</div></div></a>
    <a href="urni.html"><div class="podpunkt"><div>Урны</div></div></a>
    </div></div>
    </div>
    </td>
    <td>
    <div class="punkt" onMouseOver="overPunkt(this);" onMouseOut="outPunkt(this);"><div><img src="images/DOWN_04.jpg" width="225" height="37" alt="Интерьер, Мебель"></div
    ><div class="list_punkts"><div class="kont">
    <a href="safe.html"><div class="podpunkt"><div>Металлические ящики (сейфы)</div></div></a>
    <a href="mebel.html"><div class="podpunkt"><div>Металлокаркасы для мебели</div></div></a>
    <a href="dver.html"><div class="podpunkt"><div>Входные двери</div></div></a>
    <a href="lest.html"><div class="podpunkt"><div>Лестницы</div></div></a>
    <a href="stelaj.html"><div class="podpunkt"><div>Стелажи</div></div></a>
    <a href="stul.html"><div class="podpunkt"><div>Стулья</div></div></a>
    <a href="petli.html"><div class="podpunkt"><div>Петли</div></div></a>
    <a href="pechi.html"><div class="podpunkt"><div>Печи</div></div></a>
    </div></div>
    </div>
    </td>
    <td>
    <div class="punkt" onMouseOver="overPunkt(this);" onMouseOut="outPunkt(this);"><div><img src="images/DOWN_05.jpg" width="152" height="37" alt="Нестандарт"></div
    ><div class="list_punkts"><div class="kont">
    <a href="konv.html"><div class="podpunkt"><div>Ленточные конвейры</div></div></a>
    <a href="proiz.html"><div class="podpunkt"><div>Производственные<br/>металлоконструкции</div></div></a>
    <a href="oborud.html"><div class="podpunkt"><div>Вспомогательное<br/>оборудование</div></div></a>
    <a href="bunk.html"><div class="podpunkt"><div>Бункеры</div></div></a>
    <a href="mach.html"><div class="podpunkt"><div>Мачты</div></div></a>
    </div></div>
    </div>
    </td>
    <td>
    <div class="menu">
    <div id="block_menu">
    <div class="punkt" onMouseOver="overPunkt(this);" onMouseOut="outPunkt(this);"><div><img src="images/DOWN_06.jpg" width="242" height="37" alt="Обработка металла"></div
    ><div class="list_punkts"><div class="kont">
    <a href="frezer.html"><div class="podpunkt"><div>Фрезерные работы</div></div></a>
    <a href="tokar.html"><div class="podpunkt"><div>Токарные работы</div></div></a>
    <a href="rubka.html"><div class="podpunkt"><div>Рубка металла</div></div></a>
    </div></div>
    </div>
    </td>
    <td>
    <div class="punkt" onMouseOver="overPunkt(this);" onMouseOut="outPunkt(this);"><div><img src="images/DOWN_07.jpg" width="179" height="37" alt="Строительство"></div
    ><div class="list_punkts"><div class="kont">
    <a href="opalub.html"><div class="podpunkt"><div>Изготовление сложных опалубок</div></div></a>
    <a href="met-build.html"><div class="podpunkt"><div>Металлокаркасные строения</div></div></a>
    <a href="zaklad.html"><div class="podpunkt"><div>Изготовление закладных</div></div></a>
    <a href="mob.html"><div class="podpunkt"><div>Мобильные здания</div></div></a>
    <a href="poyas.html"><div class="podpunkt"><div>Сварка арм.пояса</div></div></a>
    <a href="garaj-vor.html"><div class="podpunkt"><div>Гаражные ворота</div></div></a>
    <a href="groups.html"><div class="podpunkt"><div>Входные группы</div></div></a>
    <a href="esto.html"><div class="podpunkt"><div>Эстокады</div></div></a>
    <a href="garaj.html"><div class="podpunkt"><div>Гаражи</div></div></a>
    </div></div>
    </div>
    </td>
    <td>
    <img src="images/DOWN_08.jpg" width="66" height="37" alt="">
    </td>
    </tr>
    </table>
    </div>
    <div class="footer_menu"></div>
    </div>
    </body>
    </html>[/CODE]
     

    Вложения:

    • index_2.html
      Размер файла:
      7 КБ
      Просмотров:
      10
  2. 1ive

    1ive Well-Known Member
    Web Team

    Регистрация:
    12 сен 2010
    Сообщения:
    694
    Симпатии:
    0
    ну кто ж так делает)

    Код рабочего меню..
    [стили думаю в состоянии поправить?]

    Без JavaScript, что лучше)


    Код (Text):
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

    <style>
    .menu{
    font-family:arial, sans-serif;
    width:212px;
    height:100px;
    position:relative;
    font-size:11px;
    z-index:100
    }
    .menu ul li a, .menu ul li a:visited{
    display:block;
    text-decoration:none;
    color:#000;
    width:104px;
    height:20px;
    text-align:center;
    color:#fff;
    border:1px solid #fff;
    background:#710069;
    line-height:20px;
    font-size:11px;
    overflow:hidden
    }
    .menu ul{
    padding:0;
    margin:0;
    list-style:none
    }
    .menu ul li{
    float:left;
    position:relative}
    .menu ul li ul{
    display:none
    }
    .menu ul li:hover a{
    color:#fff;
    background:#36f
    }
    .menu ul li:hover ul{
    display:block;
    position:absolute;
    top:21px;
    left:0;
    width:105px
    }
    .menu ul li:hover ul li a{
    display:block;
    background:#ddd;
    color:#000
    }
    .menu ul li:hover ul li a:hover{
    background:#6fc;
    color:#000
    }
    </style>
    </head>
    <body>
    <div class="menu">
    <ul>
    <li><a class="hide" href="">Раздел 1</a>
    <ul>
    <li><a href="" title="">Страница 1</a></li>
    <li><a href="" title="">Страница 1.1</a></li>
    <li><a href="" title="">Страница 1.2</a></li>
    </ul>
    </li>

    <li><a class="hide" href="">Раздел 2</a>
    <ul>
    <li><a href="" title="">Страница 2</a></li>
    <li><a href="" title="">Страница 2.1</a></li>
    <li><a href="" title="">Страница 2.2</a></li>
    <li><a href="" title="">Страница 2.3</a></li>
    <li><a href="" title="">Страница 2.4</a></li>
    <li><a href="" title="">Страница 2.5</a></li>
    </ul>
    </li>

    </ul>
    </div>
    </body>
    </html>
     
  3. LazyBoy

    LazyBoy Гость

    спасибо... раньше мой вариант тоже работал, но после того, как я сменил стили (я видимо что-то еще зацепил) перестало выезжать и всё!!!
    СПАСИБО ЕЩЕ РАЗ ОГРОМНОЕ!!!
     
  4. 1ive

    1ive Well-Known Member
    Web Team

    Регистрация:
    12 сен 2010
    Сообщения:
    694
    Симпатии:
    0
    Так, для справки..
    "спасибо" обычно лучше говорить используя плюсик в профиле))

    :)
     
  5. LazyBoy

    LazyBoy Гость

    Буду знать!!
     
  6. LazyBoy

    LazyBoy Гость

    Возможно, покажусь совсем тупым, но все-таки помогите с еще одним. код, с которым мне помог 1ive я переделал под свой сайт. Но каждая следующая пара разделов пишется под предыдущей. почему???
    <!--shcode--><pre><code class='html'><html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    <LINK href="images/logo_mini.jpg" type=ico rel=icon>
    <style>
    .menu{
    font-family:arial, sans-serif;
    width:212px;
    height:100px;
    position:relative;
    font-size:11px;
    z-index:100
    }
    .menu ul li a, .menu ul li a:visited{
    display:block;
    text-decoration:none;
    color:#000;
    width:104px;
    height:20px;
    text-align:center;
    color:#000000;
    border:0px solid #000000;
    background:none;
    line-height:20px;
    font-size:11px;
    overflow:hidden
    }
    .menu ul{
    padding:0;
    margin:0;
    list-style:none
    }
    .menu ul li{
    float:left;
    position:relative}
    .menu ul li ul{
    display:none
    }
    .menu ul li:hover a{
    color:#000000;
    background:none
    }
    .menu ul li:hover ul{
    display:block;
    position:absolute;
    top:20px;
    left:0;
    width:105px
    }
    .menu ul li:hover ul li a{
    display:block;
    background:#797950;
    color:#000
    }
    .menu ul li:hover ul li a:hover{
    background:#cccccc;
    color:#000000
    }
    </style>
    </head>
    <body>
    <div class="menu">
    <ul>
    <li><a class="hide" href="">Раздел 1</a>
    <ul>
    <li><a href="" title="">Страница 1</a></li>
    <li><a href="" title="">Страница 1.1</a></li>
    <li><a href="" title="">Страница 1.2</a></li>
    </ul>
    </li>

    <li><a class="hide" href="">Раздел 2</a>
    <ul>
    <li><a href="" title="">Страница 2</a></li>
    <li><a href="" title="">Страница 2.1</a></li>
    <li><a href="" title="">Страница 2.2</a></li>
    <li><a href="" title="">Страница 2.3</a></li>
    <li><a href="" title="">Страница 2.4</a></li>
    <li><a href="" title="">Страница 2.5</a></li>
    </ul>
    </li>

    <li><a class="hide" href="">Раздел 3</a>
    <ul>
    <li><a href="" title="">Страница 3</a></li>
    <li><a href="" title="">Страница 3.1</a></li>
    <li><a href="" title="">Страница 3.2</a></li>
    </ul>
    </li>

    <li><a class="hide" href="">Раздел 4</a>
    <ul>
    <li><a href="" title="">Страница 4</a></li>
    <li><a href="" title="">Страница 4.1</a></li>
    <li><a href="" title="">Страница 4.2</a></li>
    <li><a href="" title="">Страница 4.3</a></li>
    <li><a href="" title="">Страница 4.4</a></li>
    <li><a href="" title="">Страница 4.5</a></li>
    </ul>
    </li>

    <li><a class="hide" href="">Раздел 5</a>
    <ul>
    <li><a href="" title="">Страница 5</a></li>
    <li><a href="" title="">Страница 5.1</a></li>
    <li><a href="" title="">Страница 5.2</a></li>
    </ul>
    </li>

    <li><a class="hide" href="">Раздел 6</a>
    <ul>
    <li><a href="" title="">Страница 6</a></li>
    <li><a href="" title="">Страница 6.1</a></li>
    <li><a href="" title="">Страница 6.2</a></li>
    <li><a href="" title="">Страница 6.3</a></li>
    <li><a href="" title="">Страница 6.4</a></li>
    <li><a href="" title="">Страница 6.5</a></li>
    </ul>
    </li>
    </ul>
    </div>
    </body>
    </html>[/CODE]
     
  7. 1ive

    1ive Well-Known Member
    Web Team

    Регистрация:
    12 сен 2010
    Сообщения:
    694
    Симпатии:
    0
    Ответ в другой теме.
    не завидую я тем, кому вы сайт делаете.
     

Поделиться этой страницей