помощь в вертикальном меню CSS - PullRequest
Новая
       13

помощь в вертикальном меню CSS

0 голосов
/ 11 декабря 2010

Что я пытаюсь сделать, чтобы создать вертикальное меню CSS, подобное этому. справа от этого сайта
alt text

.У меня две проблемы.

  1. Как добавить изображение в пункт меню.

  2. Как сделать ИЗОБРАЖЕНИЕ ГРАНИЦ для всего элемента сверху ивнизу НЕ для каждого .

Это мой код 

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CSS3 Buttons</title>
    <style>


    .button {
     width: 400px;
     height: 100px;
     line-height: 100px;
     color: #C0C0C0; 
     text-decoration: none;
     font-size: 50px;
     font-family: helvetica, arial;
     font-weight: bold;
     display: block;
     text-align: center;
     position: relative;
     padding-bottom:1px;

     /* BACKGROUND GRADIENTS */
     background: #F5F3F4;



     /* BORDER RADIUS */
     /* -moz-border-radius: 10px;
     -webkit-border-radius: 10px;
     border-radius: 10px; */


     /* TEXT SHADOW */

     text-shadow: 1px 1px 1px black;

     /* BOX SHADOW */
     -moz-box-shadow: 0 1px 3px black;
     -webkit-box-shadow: 0 1px 3px black;
     box-shadow: 0 1px 3px black;
    }

    /* WHILE HOVERED */
    .button:hover {
         color: #A8A8A8;
        -moz-box-shadow: 0 2px 6px black;
        -webkit-box-shadow: 0 2px 6px black;

    }

    /* WHILE BEING CLICKED */
    .button:active {
        -moz-box-shadow: 0 2px 6px black;
        -webkit-box-shadow: 0 2px 6px black;
    }


    </style>
</head>
<body>
     <a href="#" class="button"> Profile  </a>
     <a href="#" class="button">  Privacy </a>
     <a href="#" class="button"> Services </a>
     <a href="#" class="button"> Avatar </a>
     <a href="#" class="button"> Language </a>
</body>
</html>

Ответы [ 5 ]

4 голосов
/ 12 декабря 2010

Во-первых, вы должны настроить свой HTML так, чтобы он включал список следующим образом (обратите внимание, я также добавил атрибуты id): 

<ul>
 <li><a href="#" class="button" id="profile-btn"> Profile  </a></li>
 <li><a href="#" class="button" id="privacy-btn">  Privacy </a></li>
 <li><a href="#" class="button" id="services-btn"> Services </a></li>
 <li><a href="#" class="button" id="avatar-btn"> Avatar </a></li>
 <li><a href="#" class="button" id="language-btn"> Language </a></li>
</ul>

Затем, чтобы добавить изображение, используйте следующую CSS: 

 a#profile-btn {
   background-image:url(/image_path/profile.png);
 }
 a#privacy-btn {
   background-image:url(/image_path/privacy.png);
 }
 a#services-btn {
   background-image:url(/image_path/services.png);
 }
 a#avatar-btn {
   background-image:url(/image_path/avatar.png);
 }
 a#language-btn {
   background-image:url(/image_path/language.png);
 }

И, наконец, закругленные границы: 

ul {list-style:none;}
ul li:first-child a {
  -moz-border-radius-topleft: 25px;
  -moz-border-radius-topright: 25px;
  -webkit-border-radius-topleft:25px;
  -webkit-border-radius-topright:25px;
  border-top-right-radius:25px;
  border-top-left-radius:25px;
 }
 ul li:last-child a {
   -moz-border-radius-bottomleft: 25px;
   -moz-border-radius-bottomright: 25px;
   -webkit-border-radius-bottomleft:25px;
   -webkit-border-radius-bottomright:25px;
   border-bottom-right-radius:25px;
   border-bottom-left-radius:25px;
 }

РЕДАКТИРОВАТЬ: Этот код предназначен для работы со всеми другими вашими CSS, если вы замените HTML, как показано.

0 голосов
/ 13 декабря 2010

Я бы с осторожностью относился к псевдо-селекторам первого, последнего ребенка.Очевидно, что это отличные идеи, и вы должны использовать их, потому что они являются частью стандарта, но в то же время вам нужно будет сделать некоторые поправки для браузеров, которые должным образом не соответствуют стандартам - хм, MS.То же самое относится и к свойствам пограничного радиуса.Ну и, наконец, вы можете включить графические иконки в виде тегов внутри своих ссылок (то есть, если вы хотите, чтобы они отображались в любом браузере, который не поддерживает css должным образом, и вы чувствуете, что их содержание имеет особое значение).

0 голосов
/ 11 декабря 2010

Используйте списки для этого: 

<ul id="main-menu">
    <li><a href="" title="">Link 1</a></li>
    <li><a href="" title="">Link 2</a></li>
    <li><a href="" title="">Link 3</a></li>
</ul>

И CSS: 

ul li {
    float: left;
    display: inline; 
    text-decoration: none;
    font-size: 20px;
    font-family: helvetica, arial;
    font-weight: bold;
    display: block;
    text-align: center;
    position: relative;
    margin: 0 0 0 30px;
    background: #F5F3F4;
    -moz-border-radius: 10px 10px 0 0; /* 10 top left, 10 top right. 0 for the rest */
    -webkit-border-top-radius: 10px; /* This will select only the top part */
    border-radius: 10px 10px 0 0;
    text-shadow: 1px 1px 1px black;
    -moz-box-shadow: 0 1px 3px black;
    -webkit-box-shadow: 0 1px 3px black;
    box-shadow: 0 1px 3px black;
    padding: 15px 30px;
}

ul li a { color: #C0C0C0; text-decoration: none; }

Надеюсь, вы поняли. Вы можете получить предварительный просмотр здесь: http://www.jsfiddle.net/UtNA8/

0 голосов
/ 12 декабря 2010

Вы можете использовать содержащий элемент для ссылок, в идеале тот, который может применить семантическое отношение к его содержимому, я использовал ul (поскольку это в основном неупорядоченный список) и стиль, который вместо чтобы стилизовать конкретные экземпляры несгруппированного набора элементов:

HTML 

<ul>
    <li><a href="#" class="button"> Profile  </a></li>
     <li><a href="#" class="button">  Privacy </a></li>
     <li><a href="#" class="button"> Services </a></li>
     <li><a href="#" class="button"> Avatar </a></li>
     <li><a href="#" class="button"> Language </a></li>
</ul>

1007 * CSS * ul { width: 12em; border-radius: 1em; overflow: hidden; } ul li { padding: 0.5em; background-color: #eee; } JS Fiddle demo . Если вы ориентируетесь на браузеры с надежными реализациями last-child, вы также можете использовать псевдоэлементы :first-child и :last-child: CSS: 

ul li {
    width: 12em;
    padding: 0.5em;
    background-color: #eee;
}
ul li:first-child {
    -webkit-border-top-radius: 1em;
    -moz-border-radius: 1em 1em 0 0;
    border-radius: 1em 1em 0 0;
}
ul li:last-child {
    -webkit-border-bottom-radius: 1em;
    -moz-border-radius: 0 0 1em 1em;
    border-radius: 0 0 1em 1em;
}

JS Fiddle demo

0 голосов
/ 11 декабря 2010

Использование псевдо-классов, например, так: (Если ваша навигация - это список, а класс кнопки находится в элементе списка)

li.button: first-child {-moz-border-radius: 4em 4em 00;радиус границы: 4em 4em 0 0;}

li.button: last-child {-moz-border-radius: 0 0 4em 4em;радиус границы: 0 0 4em 4em;}

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...