Вертикальное меню под наклоном

Тема в разделе "Верстка", создана пользователем anadikt, 30 окт 2012.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. anadikt

    anadikt

    Регистр.:
    29 янв 2010
    Сообщения:
    391
    Симпатии:
    58
    Подскажите пожалуйста как сделать такое: http://kovrochist.anadikt.ru/

    Нужно Чтобы при наведении фон с наклонными краями был по 10px слева и справа (у каждого пункта разная ширина из за длинны слов) текста а не по ширине 200px, также чтобы при активной странице был активный элемент в меню, или может есть проще вариант реализации меню?
     
  2. zilon

    zilon

    Регистр.:
    30 июл 2011
    Сообщения:
    370
    Симпатии:
    147
    я думаю каждой ссылке свой id сделать и в css добавить
    HTML:
    #ololo a:active { -o-transform: skewX(10deg); color: #00407E; display: block; font-family: "Trebuchet MS", "Arial", "Helvetica", sans-serif; font-size: 14px; font-style: italic; margin-left: 10px; margin-right: 10px; text-decoration: underline; }
     
    #trololo a:active { -o-transform: skewX(10deg); color: #00407E; display: block; font-family: "Trebuchet MS", "Arial", "Helvetica", sans-serif; font-size: 14px; font-style: italic; margin-left: 10px; margin-right: 10px; text-decoration: underline; }
    или картинок нарезать под каждую ссылку и каждой ссылке свой ID с путём до картинки в css
    HTML:
    #ololo a:active { background-image: url(http:// ...1.png; margin-left: 10px; margin-right: 10px;  }
    #trololo a:active { background-image: url(http:// ...2.png; margin-left: 10px; margin-right: 10px; } 
    или прямо в коде, но тогда активная ссылка будет без фона
    HTML:
    <li style="margin-left: 10px; margin-right: 10px; background-image: url(http:// ...1.png ">
    <li style="margin-left: 10px; margin-right: 10px; background-image: url(http:// ...2.png "> 
     
  3. alexXXL

    alexXXL Постоялец

    Регистр.:
    7 май 2012
    Сообщения:
    123
    Симпатии:
    8
    Там все проще. Сдвиг элементов меню обеспечивает margin-left, прописанный для каждого пункта меню, а наклонные уголки у фона сделаны через transform: skewX(-10deg); http://htmlbook.ru/css/transform
     
  4. viryys

    viryys Создатель

    Регистр.:
    26 окт 2012
    Сообщения:
    19
    Симпатии:
    1
    вариант с сайта

    HTML:
    Код:
    <div class="navi">
          <ul>
            <li style="margin-left: 20px; width: 120px;"><a href="index.html">Главная</a></li>
            <li style="margin-left: 16px; width: 120px;"><a href="prices.html">Наши цены</a></li>
            <li style="margin-left: 12px; width: 130px;"><a href="examples.html">Примеры работ</a></li>
            <li style="margin-left: 8px; width: 120px;"><a href="zakaz.html">Заявка</a></li>
            <li style="margin-left: 4px; width: 120px;"><a href="articles.html">Статьи</a></li>
            <li style="width: 120px;"><a href="contacts.html">Контакты</a></li>
          </ul>
        </div>
    CSS:
    Код:
    .navi {
    width: 210px;
    margin-top: 170px;
    }
     
    .navi li {
    display: block;
    margin-right: 3px;
    padding: 3px 10px;
    -webkit-transform: skewX(-10deg); /* Для Safari и Chrome */
    -moz-transform: skewX(-10deg); /* Для Firefox */
    -o-transform: skewX(-10deg); /* Для Opera */
    -ms-transform: skewX(-10deg); /* Для IE */
    transform: skewX(-10deg); /* CSS3 */
    }
    .navi a {
    color: #00407E;
    display: block;
    padding: 3px 10px;
    text-decoration: underline;
    -webkit-transform: skewX(10deg); /* Для Safari и Chrome */
    -moz-transform: skewX(10deg); /* Для Firefox */
    -o-transform: skewX(10deg); /* Для Opera */
    -ms-transform: skewX(10deg); /* Для IE */
    transform: skewX(10deg); /* CSS3 */
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-style: italic;
    }
    .navi a:hover {
    color: #fff;
    display: block;
    padding: 3px 10px;
    text-decoration: underline;
    -webkit-transform: skewX(10deg); /* Для Safari и Chrome */
    -moz-transform: skewX(10deg); /* Для Firefox */
    -o-transform: skewX(10deg); /* Для Opera */
    -ms-transform: skewX(10deg); /* Для IE */
    transform: skewX(10deg); /* CSS3 */
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-style: italic;
    }
    .navi li:hover {
    background: #00407e; /* Цвет фона при наведении курсора мыши */
    color: #fff;
    }
    
     
  5. anadikt

    anadikt

    Регистр.:
    29 янв 2010
    Сообщения:
    391
    Симпатии:
    58
    Ну только так смог, если есть варианты упростить код, буду очень благодарен! Хотелось бы в идеале сделать такое:
    1) Ширина фона при наведении была по 15px шире с левой и правой стороны!
    2) Прописать для активной страницы код CSS, чтобы был выделен пункт меню!
    3) Упростить код!
     
  6. viryys

    viryys Создатель

    Регистр.:
    26 окт 2012
    Сообщения:
    19
    Симпатии:
    1
    1. Фон у вас будет одного цвета? если да то просто в классе .navi a изменяете свойство padding на
    Код:
    .navi a {
    color: #00407E;
    display: block;
    [B]padding: 18px 10px;[/B]
    text-decoration: underline;
    -webkit-transform: skewX(10deg); /* Для Safari и Chrome */
    -moz-transform: skewX(10deg); /* Для Firefox */
    -o-transform: skewX(10deg); /* Для Opera */
    -ms-transform: skewX(10deg); /* Для IE */
    transform: skewX(10deg); /* CSS3 */
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-style: italic;
    }
    чтобы пункты меню тянулись, то необходимо убрать из li стили в теге с width:
    Код:
    <div class="navi">
          <ul>
            <li style="margin-left: 20px;"><a href="index.html">Главная</a></li>
            <li style="margin-left: 16px;"><a href="prices.html">Наши цены</a></li>
            <li style="margin-left: 12px;"><a href="examples.html">Примеры работ</a></li>
            <li style="margin-left: 8px;"><a href="zakaz.html">Заявка</a></li>
            <li style="margin-left: 4px;"><a href="articles.html">Статьи</a></li>
            <li style=""><a href="contacts.html">Контакты</a></li>
          </ul>
        </div>
    2. чтобы был выделен пункт меню нужно добавить активному пункту class active (<li style="margin-left: 20px;"><a class="active" href="index.html">Главная</a></li>) например и прописать ему стиль в css:
    Код:
    .navi a.active {background:#(ваш_цвет);}
    
    3. куда уж проще то код:)
    можно убрать наклон в пункте меню это удалить данные стили
    Код:
    .navi a {
    color: #00407E;
    display: block;
    padding: 18px 10px;
    text-decoration: underline;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-style: italic;
    }