Язык
Контакты
GitHub
Поддержка
Регистрация
Войти
Логин: Пароль: Запомнить:
Пользователи
Последние сообщения
Ответить
1

Горизонтаьное полупрозрачное меню

Сашка_из_Шебекино

  • Заклинатель Атома
  • Пользователь
  • 1803
  • Репутация:87 
  • Предупреждения: 0 
  • Регистрация:
    27 Мар 2011
#1


Создаем сниппет с кодом:
Code:
?> // дальше идет большой html код, поэтому проще закрыть php и не пользоваться echo 

<nav>
// блок навигации. появился в html5.
// если хотите поддержки старых браузеров то замените <nav> на <div class="nav">
// </nav> на </div>, а также в css перед nav ставьте точку
    <a href="/"><div>Главная</div></a>
    <a href="/news"><div>Новости</div></a>
    <a href="/forum"><div>Форум</div></a>
    <a href="/loads"><div>Файлы</div></a>
    <a href="/stat"><div>Статьи</div></a>
    <a href="/foto"><div>Фото</div></a>
    <a href="/users"><div>Пользователи</div></a>
    <a href="/1"><div>Сервисы</div></a>
    <a href="/2"><div>Инфо</div></a>
<?php // включаем php чтобы показать или скрыть ссылку на админку

$this->ACL = new ACL;
if ( isset( $_SESSION['user']['name'] ) and $this->ACL->turn(array('panel', 'entry'), false)) {
    echo '<a href="/admin"><div>Админка</div></a>';
}


echo '</nav>';

В css:

Code:
/* меню */
nav {border:1px solid rgba(0, 0, 0, 1); border-radius: 0px 0px 5px 5px; margin: 0; margin-bottom: 5px; padding: 0; display: table; width: 100%;}
nav div {display: table-cell; width: 134px; text-align: center; height: 35px; vertical-align: middle; text-align: center; background-color: rgba(0, 0, 0, 0.4);}
nav div:hover {background-color: rgba(30, 30, 30, 0.5);}
nav a {text-decoration: none; display: table-cell;}
/* конец меню */

Отредактировано автором 26 Дек 2011

skad0

  • Атом-мозг
  • Юзер
  • 841
  • Репутация:10 
  • Предупреждения: 0 
  • Регистрация:
    2 Окт 2010
#2
Надо бы подключить Lightbox или что-то такое сюда, ибо выкачивать картинку не торт

Drunya

  • Man of God
  • Админ
  • 3527
  • Репутация:110 
  • Предупреждения: 0 
  • Регистрация:
    30 Ноя -0001
#3
классное меню)

Добавлено2011.09.28 17-04

skad0 пишет:
выкачивать картинку не торт
правая кнопка-открыть)

Я горжусь тем, что создал бесплатную CMS - AtomX. И люблю нашу команду)

Сашка_из_Шебекино

  • Заклинатель Атома
  • Пользователь
  • 1803
  • Репутация:87 
  • Предупреждения: 0 
  • Регистрация:
    27 Мар 2011
#4
Drunya пишет:
правая кнопка-открыть)
не всё равно надо бы это выводить на клик левой кнопкой

ARMI

  • Заклинатель Атома
  • Пользователь
  • 1858
  • Репутация:46 
  • Предупреждения: 0 
  • Регистрация:
    4 Янв 2011
#5
Сашка_из_Шебекино пишет:
не всё равно надо бы это выводить на клик левой кнопкой
согласен
А менюха прикольная)

Я горжусь тем, что помогаю в развитии бесплатной CMS - AtomX

Drunya

  • Man of God
  • Админ
  • 3527
  • Репутация:110 
  • Предупреждения: 0 
  • Регистрация:
    30 Ноя -0001
#6
Сашка_из_Шебекино пишет:
не всё равно надо бы это выводить на клик левой кнопкой
сделаем.
ЗЫ: все ухожу, а то развел флуд не по теме))

Я горжусь тем, что создал бесплатную CMS - AtomX. И люблю нашу команду)
1
Сейчас online: 2. Зарегистрированных: 0. Гостей: 2.