Index · Правила · Поиск· Группы · Регистрация · Личные сообщения· Вход

Список разделов Веб-строительство и интернет-проекты
 
 
 

Раздел: Веб-строительство и интернет-проекты Выпадающее вверх меню 

Создана: 14 Июня 2010 Пон 11:09:13.
Раздел: "Веб-строительство и интернет-проекты"
Сообщений в теме: 35, просмотров: 8141

На страницу: Назад  1, 2, 3  Вперёд
  1. 14 Июня 2010 Пон 11:09:13
    Уважаемые интернет -гуру. пожалуйста подскажите.
    Есть такое меню
    HTML
    <ul id="cssmenu">
    <li><a href="#">новости</a>
    </li>
    <li><a href="#">модели</a>
    <ul>
    <li><a href="#">Дети</a></li>
    <li><a href="#">Юноши с 16 лет</a></li>
    <li><a href="#">Девушки с 16 лет</a></li>
    </ul>
    </li>
    <li><a href="#">проекты</a>
    <ul>
    <li><a href="#">Ссылка 1</a></li>
    <li><a href="#">Ссылка 2</a></li>
    </ul>
    </li>
    <li><a href="#">свободный кастинг</a>
    <ul>
    <li><a href="#">Ссылка 1</a></li>
    <li><a href="#">Ссылка 2</a></li>
    </ul>
    </li>
    <li><a href="#">преподаватели</a>
    <ul>
    <li><a href="#">Ссылка 1</a></li>
    <li><a href="#">Ссылка 2</a></li>
    </ul>
    </li>
    <li><a href="#">о нас</a>
    <ul>
    <li><a href="#">Ссылка 1</a></li>
    <li><a href="#">Ссылка 2</a></li>
    </ul>
    </li>
    <li><a href="#">наши работы</a>
    <ul>
    <li><a href="#">Публикации</a></li>
    <li><a href="#">Наши работы</a></li>
    </ul>
    </li>
    </ul>


    и СSS
    ul#cssmenu {
    width:705px;
    margin: 0;
    border: 0 none;
    padding: 0;
    list-style: none;
    background: #ffffff;
    height: 20px;
    font: bold 12px/28px Verdana, Arial;

    }

    ul#cssmenu li {
    margin: 0;
    border: 0 none;
    padding: 0;
    float: left;
    display: inline;
    list-style: none;
    position: relative;
    height: 25px;

    }

    ul#cssmenu ul {
    margin: 0;
    border: 0 none;
    padding: 0;
    width: 160px;
    list-style: none;
    display: none;
    position: absolute;
    top: 30px;
    left: 0;

    }

    ul#cssmenu ul:after {
    clear: both;
    display: block;
    font: 1px/0px serif;
    content: ".";
    height: 0;
    visibility: hidden;

    }

    ul#cssmenu ul li {
    width: 150px;
    float: left;
    display: block !important;
    display: inline;

    }

    /* Main Menu */
    ul#cssmenu a {
    border: 0px;
    padding: 0 10px;
    float: none !important;
    float: left;
    display: block;
    border-bottom: #000000 1px solid;
    background: #ffffff;
    color: #000000;
    font: bold 12px/28px Verdana, Arial;
    text-decoration: none;
    height: auto !important;
    height: 1%;
    }

    /* Main Menu Hover */
    ul#cssmenu a:hover,
    ul#cssmenu li:hover a,
    ul#cssmenu li.iehover a {
    background: #000000;
    color:#ffffff;

    }

    /* Second Menu */
    ul#cssmenu li:hover li a,
    ul#cssmenu li.iehover li a {
    float: none;
    background: #000000;
    color: #ED1B24;

    }

    /* Second Menu Hover */
    ul#cssmenu li:hover li a:hover,
    ul#cssmenu li:hover li:hover a,
    ul#cssmenu li.iehover li a:hover,
    ul#cssmenu li.iehover li.iehover a {
    border-top: 1px solid #FFFFFF;
    background: #000000;
    color:# ED1B24;

    }

    ul#cssmenu ul ul {
    display: none;
    position: absolute;
    top: 0;
    left: 170px;

    }

    ul#cssmenu li:hover ul ul,
    ul#cssmenu li.iehover ul ul {
    display: none;
    }

    ul#cssmenu li:hover ul,
    ul#cssmenu ul li:hover ul,
    ul#cssmenu li.iehover ul,
    ul#cssmenu ul li.iehover ul {
    display: block;
    }

    Проблема в том, что я никак не могу сделать его выпадающем вверх, хотя думаю что это возможно....через z-index или отрицательные значения margin. Подскажите если можете. Вопрос жизни и смерти
  2. 14 Июня 2010 Пон 12:30:23
    Если подойти к решению проблемы "в лоб", то можно сделать так:

    1.
    Код:

    ul#cssmenu ul {
    top: -55px;
    }


    Но это будет работать только для тех пунктов, у которых два выпадающих подпункта.

    а для пункта "модели" сделать отдельный ID и так, чтобы предыдущий селектор не перкрывал его свойство top:
    Код:

    <ul id="menu3">
    <li><a href="#">Дети</a></li>
    <li><a href="#">Юноши с 16 лет</a></li>
    <li><a href="#">Девушки с 16 лет</a></li>
    </ul>

    Код:

    #menu3{

    top: -80px !important;
    }


    Н а уж если хочется сделать красиво, то над кодом надо как-то поработать. Мне лениво.
  3. 14 Июня 2010 Пон 16:55:50
    Спасибо больше, а можно ли как то реализовать это например через z-index
  4. 14 Июня 2010 Пон 17:02:26
    так z-index только в "глубину" работает, а тебе же надо по вертикали спозиционировать элементы списка.
  5. 14 Июня 2010 Пон 21:49:11
    Ладно бог с ним с z- индексом, будь добр как светоч разума и маяк русской интелегенции, подскажи еще....есть код

    ul#cssmenu ul li {
    width: 150px;
    float: left;
    display: block !important;
    display: inline;

    он задает, ширину выпадающего списка...точнее ширину той области которая выделяется....как бы мне его поменять для каждого пункта...с учетом того, что я присвоил уже каждому пункту id menu1? menu2 и прочее....очень сильно обяжешь
  6. 14 Июня 2010 Пон 22:13:45
    А вот здесь я что-то вопроса не понял
    franc-tireur писал :....как бы мне его поменять для каждого пункта...
    "его" - это кого? тебе как-то надо каждый пункт меню индиdидуально оформить что ли? Если да, то что именно должно различаться? Вообще, это твой собственный код, или ты откуда-то взял и теперь модифицируешь?
  7. 14 Июня 2010 Пон 22:18:16
    Ну изначально, взял на каком то сайте...но он уже сильно модифицирован....
    По поводу того, что я хочу...то есть смотри я задаю высоту выпадения для каждого пункта...ну точнее для каждого списка выпадающего....и так же в зависимости от длины слов, я хочу задать разную ширину выделения для каждого из этого списков....сейчас это задается кодом
    ul#cssmenu ul li {
    width: 150px;
    float: left;
    display: block !important;
    display: inline;

    }
    как мне его применить с своим значением width для
    <li><a href="#">наши работы</a>
    <ul>
    <li><a href="#">Публикации</a></li>
    <li><a href="#">Наши работы</a></li>
    </ul>
  8. 15 Июня 2010 Втр 11:04:34
    Ну тогда здесь тебе нужно пользоваться не контекстными селекторами, а напрямую давать ID для каждой группы списка ul, для которого ты хочешь задавать свои свойства. Вот как ты и сам написал: menu1, menu2, menu3 и назначай им свои свойства.
  9. 15 Июня 2010 Втр 11:16:39
    А поподробнее), если можно...а то я совсем новичок в этом деле)...а про выпадающее меню на CSS+ HTML, мало, что есть...то есть смотри....есть HTML
    <li><a href="#">модели</a>
    <ul id="menu2">
    <li><a href="#">Дети</a></li>
    <li><a href="#">Юноши с 16 лет</a></li>
    <li><a href="#">Девушки с 16 лет</a></li>
    </ul>
    </li>

    присвоен id - menu2 (по твоему бесценному совету!)
    Как мне теперь конкретно для этого списка прописать

    ul#cssmenu ul li {
    width: 150px;
    float: left;
    display: block !important;
    display: inline;
  10. 15 Июня 2010 Втр 11:38:40
    Ну тогда в CSS будет так:
    Код:

    ul#menu1 {
    /* и здесь задавай, какие тебе нужно свойства*/
    }



    ну и так же для menu2 и сколько там надо.

    Только у тебя может быть ситуация, когда твои новые ID будут перекрываться свойствами уже ранее объявленными селекторами, которые могут иметь больший "вес". Тогда для своих индивидуальных блочков к нужным тебе параметрам примени опцию important!.

    По-хорошему переработать бы тебе CSS, чтобы не было такой мешанины, а то уж больно громоздкий код получается. Можно все это дело отсматривать через FireBug файрфокса - там сразу видно будет, какие свойства работают у элементов, а какие чем перекрываются.
  11. 15 Июня 2010 Втр 15:18:20
    Код согласен громоздкий и неаккуратный получается, я конечно попробую его почистить...в принципе в специальный программах я такое меню делал быстро, но проблема в том, что это будет единственное меню на сайте, поэтому требуется, что бы оно работало независимо от включенных -отключенных флеш и ява скриптов
  12. 15 Июня 2010 Втр 16:52:48
    А вообще может быть знаешь что нибудь, что бы позволяло автоматом сделать такое меню...я имею ввиду навроде 123Flash, только на чистом CSS
  13. 15 Июня 2010 Втр 19:58:07
    А как понять, "автоматом?". Можно только сегенерировать меню специальными програми. Вот есть программа, сам пользовался, Sothink DHTML Menu. Там можно сгенерить самые разные менюшки. Также генерится код для вставки на страницу. Только вот если надо будет потом что-то добавить, или убрать - придется снова воспользоваться этой программой для модификации.
  14. 15 Июня 2010 Втр 21:37:18
    спасибо за помощь, надоело возиться долго с CSS -сайт то стоит, плюнул и написал меню на js, спасибо за помощь, теперь знаю кто на форуме гуру CSS + HTML
  15. 15 Июня 2010 Втр 21:44:03
    Теперь вопрос не по теме, на какую CMS проще всего натянуть свой дизайн...спрашиваю только у тебя, а то начнется....нафига тебе CMS...бери блокнот), стадию блокнота я вроде более или менее прошел пришла пора CMS
На страницу: Назад  1, 2, 3  Вперёд