Не нравятся результаты поиска? Попробуйте другой поиск!

Профиль пользователя как на dle-faq.ru


     20.02.2013    Шаблоны (TPL)    6295

вопрос
Перепробовал кучу css меню, css вкладок, слайдеров, каруселей не получается сделать, чтобы ссылка на редактирование профиля выглядела как вкладка с настройками. Либо аватарка не отображается либо поля с информацией о пользователе. Хочу сделать просто, что бы без лишних скриптов. Разумеется я не хочу в точности копировать вид профиля dle-faq.ru. Это я как пример привел:) Подскажите как реализовать вкладки в профиле или подскажите как правильно называется такой вид профиля.

Ответил: web4ik


Здравствуйте! Сайт dle-faq использует bootstrap 2.0.2. Скачать его можно тут Bootstrap . Имейте в виду, что на dle-faq bootstrap переделана под сайт. Функции остались те-же. Надеюсь помог, если что напишите, я отвечу.

Комментарии пользователей (3)

Lynch
5 | 5

Lynch - 9 марта 2013 11:37 - Юзер

Я себе сделал на css, без js

HTML:
<div class="tabsLink">
        <a href="#tab1">Вкладка 1</a>
        <a href="#tab2">Вкладка 2</a>
        </div>
        
        <br>
        <a class="tabs" id="tab1"></a>
        <div class="tab">
        Вкладка 1 <br>
        </div>
        
        <a class="tabs" id="tab2"></a>
        <div class="tab">
    Вкладка 2 <br>
        </div>


CSS:
.tabs {
    opacity: 0;  /* Прозрачность */
    visibility: hidden; /* Изначально - спрятан */
}
.tab{
    position:absolute; /* Абсолютное позиционирование */
    visibility: hidden;    /* Изначально - спрятан */
    z-index: 10;    /* z-index */
    color:#478CFB; /* Цвет */
    font: bold 12pt "Trebuchet MS", tahoma, verdana, arial narrow, arial; /* Толщина, размер и семейство шрифта */
}.tabs:target+.tab {
    opacity: 1; /* Убирает прозрачность */
    visibility: visible; /* Делает видимым */
}.tabsLink a{
    background-color:#478CFB; /* Цвет */
    padding:5px; /* Внутренние отступы */
    font: bold 12pt "Trebuchet MS", tahoma, verdana, arial narrow, arial; /* Толщина, размер и семейство шрифта */
    color:#fff; /* Цвет */
    text-decoration:none; /* Отсутствие нижней линии */
    
    /* Округление старт */
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    /* Округление конец */
}


Взял в Блюкод.ру

Демо: _http://bluecode.ru/demo/97/index.html

Минусы:
1. Надо довести дизайн до ума
2. Сделано на якорях, поэтому если зайти прямой системной ссылкой: сайт.ру/юзер/имя_юзера, будет пустое окно с вкладками, чтобы увидеть инфо о себе или "редактировать" приходиться нажимать на какую-нибудь вкладку - полагаю проблема решаема, если шаблоны править и дать ссылку на конкретный якорь(вкладку).

Плюсы:
1.Можно сослаться на конкретный якорь(вкладку)
2. Где-то на DLE-FAQ читал что, есть такая проблема когда страница грузиться(еще в процессе загрузки) показываются все элементы и только потом после загрузки прячутся элементы, которые по сути должны быть не видны до события(клика). Этот код грузил на нескольких скоростях, такой проблемы не обнаружил.

Lynch
5 | 5

Lynch - 9 марта 2013 16:58 - Юзер

хотел добавить, тем у кого дергается при клике замените везде след. css:
visibility: hidden

на
display:none


и
visibility: visible

на
display:block

Gopr
10

494 | 164

Gopr - 12 марта 2013 00:49 - Юзер

Спасибо попробую

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы