Выпадающее меню не могу сделать

Тема в разделе "Веб-дизайн", создана пользователем zaqwsx_, 20 сен 2009.

Статус темы:
Закрыта.
Модераторы: zek24
  1. zaqwsx_

    zaqwsx_

    Регистр.:
    29 авг 2006
    Сообщения:
    227
    Симпатии:
    14
    Помогите пожалуйста сделать меню, так, чтобы было скругление, не получается добавить в конце скругление, и в начале плавные переходы, получается квадратное меню :( ,или покажите пример, хочется чтобы было вот такое выпадающее меню :

    [​IMG]
     
  2. rafic

    rafic

    Регистр.:
    14 май 2008
    Сообщения:
    477
    Симпатии:
    24
    Код в студию. Сорри на форуме телепатов нет.
     
  3. zaqwsx_

    zaqwsx_

    Регистр.:
    29 авг 2006
    Сообщения:
    227
    Симпатии:
    14
    Вот CSS :
    .menu{
    margin: 0 auto;
    min-width: 960px;
    max-width: 1500px;
    /* padding-left:13%; */
    font-family:Verdana, Geneva, sans-serif;
    width:960px;
    height:100px;
    /* position:relative; */
    font-size:24px;
    z-index:100; /* Основное меню находится ниже подменю */
    }
    .menu ul li a, .menu ul li a:visited{
    display:block; /* При выделении пункта курсором мыши отображается подменю Ссылка как блочный элемент */
    text-decoration:none;
    color:#000;
    width:auto;
    height:20px;
    text-align:center;
    /* color:#fff; */
    /* border:1px solid #fff; */
    /* background:#710069; */
    line-height:20px;
    font-size:18px;
    overflow:hidden
    border-bottom: 1px dashed ; /* Добавляем пунктирную линию под текстом */
    height:41px;
    line-height:40px;
    padding-left:20px;
    }
    .menu ul{
    padding:0;
    margin:0;
    list-style:none;
    }
    .menu ul li{
    float:left;
    position:relative;
    border-bottom: 1px dashed ;
    margin-left:30px;
    }
    .menu ul li ul{
    display:none;
    margin-top:20px; /* отступ вниз после главного меню */
    }
    .menu ul li ul li{
    width: 275px;
    margin: 0px;
    border-bottom:none;
    height:35px; /*!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
    }
    .menu ul li:hover a{
    color:#fff;
    background-image: url(../images/images/menu1.jpg);
    background-repeat:no-repeat;
    border-bottom: none;
    height:41px;
    line-height:40px;
    padding-left:20px;
    width:auto;

    }
    .menu ul li:hover ul{
    display:block;
    position:absolute;
    top:21px;
    left:0;
    width:105px;
    height: 40px;

    }
    .menu ul li:hover ul li a{
    display:block;
    background-image:url(../images/images/menu5off.jpg);
    color:#fff;
    text-align: left;
    padding-left: 20px;
    height:35px;
    line-height:30px;
    font-size:14px;
    }
    .menu ul li:hover ul li a:hover{
    background-image:url(../images/images/menu3on.jpg);
    color:#FD5900;
    }


    А вот HTML :
    <div class="menu">
    <ul>
    <li><a class="hide" href="">О компании</a>
    <!--[if lte IE 6]><a href="">Раздел 1<table><tr><td><![endif]-->
    <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>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li><a class="hide" href="">Услуги и цены</a>
    <!--[if lte IE 6]><a href="">Раздел 2<table><tr><td><![endif]-->
    <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>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li><a class="hide" href="">Копилка идей</a>
    <!--[if lte IE 6]><a href="">Раздел 2<table><tr><td><![endif]-->
    <ul>
    <li><a href="" title="">Страница 3</a></li>
    <li><a href="" title="">Страница 3.1</a></li>
    <li><a href="" title="">Страница 3.2</a></li>
    <li><a href="" title="">Страница 3.3</a></li>
    <li><a href="" title="">Страница 3.4</a></li>
    </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li><a class="hide" href="">Справка</a>
    <!--[if lte IE 6]><a href="">Раздел 2<table><tr><td><![endif]-->
    <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>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li><a class="hide" href="">Контакты</a>
    <!--[if lte IE 6]><a href="">Раздел 2<table><tr><td><![endif]-->
    <ul>
    <li><a href="" title="">Страница 5</a></li>
    <li><a href="" title="">Страница 5.1</a></li>
    </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    </ul>
    </div>

    Добавлено через 54 секунды
    но в коде у меня оно просто обыкновенное выпадающее меню, и больше ничего :(
     
  4. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.126
    Симпатии:
    668
    код писать не буду, т.к. свою голову иметь надо, но опишу на словах.
    Ссылке при наведении задается фон с закруглениями, дальше выпадающему списку задаются относительные позиции и в него помещается слой или же опять список с абсолютными позициями (закругление в правом верхнем углу). Дальше просто список со ссылками второго уровня. После нижнее закругление. Все просто.
    Похожее меню делал сюда
    http://rodex-dom.ru/
    посмотри исходник
     
  5. pozerovnet

    pozerovnet

    Регистр.:
    31 янв 2008
    Сообщения:
    400
    Симпатии:
    11
    Visual QuickMenu замутит тебе такую штуку.
     
    Onu нравится это.
  6. _axl

    _axl Постоялец

    Регистр.:
    24 сен 2008
    Сообщения:
    50
    Симпатии:
    8
    Чисто css ты не нарисуешь такое меню, нарезай бэкграунды в gif, а лучше png. И я бы использовал htchover, а то уж больно страшно смотрится:
    :)
     
Статус темы:
Закрыта.