Лучший способ кодирования системы навигации по вкладкам HTML / CSS / JS (без изображений) - PullRequest
Новая
       11

Лучший способ кодирования системы навигации по вкладкам HTML / CSS / JS (без изображений)

3 голосов
/ 14 июля 2010

Я кодирую систему вкладок для моего сайта, которая должна быть полностью CSS / HTML / JS (без использования каких-либо изображений). Проблема в том, что я продолжаю взламывать код до тех пор, пока не закончу его беспорядок. Я не знаю, использовать ли позиционирование, или плавать вкладки или что. По сути, одна из больших проблем заключается в том, что после того, как я убрал CSS нижней границы выбранной вкладки, мне нужно переместить его на 1 пиксель вниз, чтобы он легко сливался с заголовками сортировки - я не знаю, использовать ли маржу: -1px или позиция: относительная / абсолютная и т. д. Я хотел бы получить несколько советов о том, как создать хороший код для системы вкладок, такой, чтобы ее можно было повторно использовать на веб-сайте!

alt text

Ответы [ 5 ]

5 голосов
/ 15 июля 2010

Вот пример с CSS, который заставляет его работать:

HTML: 

<body>
    <div class="tabs">
        <ul>
            <li><a href="#item1">Item 1</a></li>
            <li class="active"><a href="#item2">Item 2</a></li>
            <li><a href="#item3">Item 3</a></li>
        </ul>
        <div class="tabInner">
            <div id="item1">
                bla1
            </div>
            <div id="item2">
                bla2
            </div>
            <div id="item3">
                bla3
            </div>
        </div>
    </div>
</body>

CSS: 

.tabs ul {
    list-style: none;
}

.tabs ul li {
    float: left;
    background: #eee;
    border: 1px #aaa solid;
    border-bottom: none;
    margin-right: 10px;
    padding: 5px;
}

.tabs ul li.active {
    margin-bottom: -1px;
    padding-bottom: 6px;
}

.tabInner {
    clear: both;
    border: 1px solid #aaa;
    height: 200px;
    overflow: hidden;
    background: #eee;
}

.tabInner div {
    height: 200px;
    padding: 10px;

}

Он даже работает без JS (в некоторой степени).Вам все еще понадобится JS для перемещения «активного» класса arround, а также, если вам нужны необычные переходы.

Смотрите его в действии здесь: http://jsfiddle.net/V8CK4/

2 голосов
/ 14 июля 2010

Я бы использовал div, вложенные в список. 

<ul>
<li>Tab1
    <div> Content for Tab1</div>  
</li>
<li>Tab2
    <div> Content for Tab2</div>  
</li>
<li>Tab3
    <div> Content for Tab3</div>  
</li>
</ul>

Тогда при использовании css в стиле ul li div не показывать.Я бы использовал jQuery, чтобы показать дочерние элементы div по щелчку родительского элемента li.

РЕДАКТИРОВАТЬ: Благодаря комментарию ... Обратите внимание, что li должны быть в стиле, чтобы они не прерывали строку после каждого.Также установите для стиля списка li значение none.

1 голос
/ 14 июля 2010

Полагаю, проблема в том, чтобы сделать вкладку и панель под ней похожими друг на друга, не используя слишком много кода.

То, что я сделал раньше, - это чтобы два элемента, к которым я хочу присоединиться, слегка перекрывали (или не делали вообще), а затем помещали третий элемент (того же цвета, что и оба других элемента), где перекрытие. Это действует как патч .

Как это:

I. без патча 

     _________________ 
    |                 |
    |    tab          |
  __|_________________|________________________________
 |                                                     |
 |       menu bar                                      |
 |_____________________________________________________|

II. с патчем 

     _________________ 
    |    tab          |
    |- - - - - - - - -|
 ___|    patch        |_______________________________
|    - - - - - - - - -                                |
|        menu bar                                     |
|_____________________________________________________|

Вам нужно будет использовать z-indexes только для правильной работы. Патч может распространяться на вкладку div, в которой он содержится, используя position: absolute и достаточно высокое значение для top.

Обновление: демонстрация

http://jsfiddle.net/7GJaW/

1 голос
/ 14 июля 2010

По-моему, я бы написал так: 

<div class="tabContainer">
    <ul class="tabList">
        <li><a href="#item1">Item 1</a></li>
        <li><a href="#item2">Item 2</a></li>
        <li><a href="#item3">Item 3</a></li>
    </ul>

    <em class="tabMessage">This is the message on the right.</em>

    <div class="tabInnerContainer">
        <div id="item1">
            bla
        </div>
        <div id="item2">
            bla
        </div>
        <div id="item3">
            bla
        </div>
    </div>
</div>

Таким образом, вы сможете заставить его работать хотя бы до некоторой степени без Javascipt, что заметно ухудшится в браузерах с отключенным JS.Некоторые из классов могут быть удалены при использовании сплайсеров CSS3.

0 голосов
/ 14 июля 2010

Как упомянуто @Otis, вложение - довольно хорошая техника.Я обычно вкладываю ul 100 * * * * * * * Однако, если вы не пытаетесь сделать выпадающий список ...

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

Похожие темы

...