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

anadikt

anadikt

Гуру форума
Регистрация
28 Янв 2010
Сообщения
435
Реакции
87
Подскажите пожалуйста как сделать такое: Для просмотра ссылки Войди или Зарегистрируйся

Нужно Чтобы при наведении фон с наклонными краями был по 10px слева и справа (у каждого пункта разная ширина из за длинны слов) текста а не по ширине 200px, также чтобы при активной странице был активный элемент в меню, или может есть проще вариант реализации меню?
 
я думаю каждой ссылке свой 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 ">
 
Там все проще. Сдвиг элементов меню обеспечивает margin-left, прописанный для каждого пункта меню, а наклонные уголки у фона сделаны через transform: skewX(-10deg); Для просмотра ссылки Войди или Зарегистрируйся
 
вариант с сайта

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;
}
 
viryys написал(а):
вариант с сайта

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;
}
Нажмите для раскрытия...
Ну только так смог, если есть варианты упростить код, буду очень благодарен! Хотелось бы в идеале сделать такое:
1) Ширина фона при наведении была по 15px шире с левой и правой стороны!
2) Прописать для активной страницы код CSS, чтобы был выделен пункт меню!
3) Упростить код!
 
anadikt написал(а):
Ну только так смог, если есть варианты упростить код, буду очень благодарен! Хотелось бы в идеале сделать такое:
1) Ширина фона при наведении была по 15px шире с левой и правой стороны!
2) Прописать для активной страницы код CSS, чтобы был выделен пункт меню!
3) Упростить код!
Нажмите для раскрытия...
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;
}
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху