Добро пожаловать на Pro Pawn - Портал о PAWN-скриптинге.
Показано с 1 по 3 из 3
  1. #1
    Аватар для - John.Besson
    Пользователь

    Статус
    Оффлайн
    Регистрация
    10.12.2013
    Адрес
    Украина, Киев
    Сообщений
    20
    Репутация:
    4 ±

    Серое горизонтальное меню, без выпадающего списка.

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

    PHP код:
    <div id="menu-out">
       <
    ul id="menu">
          <
    li><a href="/">Главная</a></li>
          <
    li><a href="/">Форум</a></li>
          <
    li><a href="/">Категории</a></li>
          <
    li><a href="/">Галерея</a></li>
          <
    li><a href="/">О нас</a></li>
          <
    li><a href="/">Контакты</a></li>
       </
    ul>
    </
    div>​ 
    PHP код:
    #menu-out {
       
    width100%;
       
    background-image: -moz-linear-gradient(rgba(2002002000.7), #FFFFFF);
       
    background-image: -webkit-gradient(linearleft topleft bottomfrom(rgba(2002002000.7)), to(rgba(2002002000.7), #FFFFFF));
       
    background-image: -webkit-linear-gradient(rgba(2002002000.7), #FFFFFF);
       
    background-image: -o-linear-gradient(rgba(2002002000.7), #FFFFFF);
       
    background-image: -ms-linear-gradient(rgba(2002002000.7), #FFFFFF);
       
    background-imagelinear-gradient(rgba(2002002000.7), #FFFFFF);
       
    border-top1px solid #333;
       
    border-bottom4px solid #999;
    }

    #menu-out:hover {
       
    -moz-box-shadow0 0px 5px rgba(0,0,0,.7);
       -
    webkit-box-shadow0 0px 5px rgba(0,0,0,.7);
       
    box-shadow0 0px 5px rgba(0,0,0,.7);
    }

    #menu {
       
    margin0 30px;
       
    height30px;
       
    padding0;
       
    positionrelative;
       
    margin-right12px;
    }

    #menu li {
       
    floatleft;
       
    font-family'BebasNeueRegular';
       
    line-height30px;
       
    font-size14px;
       
    text-shadow0px 1px 0px #f4f4f4;
       
    list-stylenone;
    }

    #menu li a {
       
    displayblock;
       
    padding0 10px 0 10px;
       
    text-decorationnone;
       
    color#323232;
       
    text-shadow0 1px 2px #fff;
    }

    #menu li a:hover {
       
    background-image: -moz-linear-gradient(#7BBBF7, #338CDF);
       
    background-image: -webkit-gradient(linearleft topleft bottomfrom(#7BBBF7), to(#7BBBF7, #338CDF));
       
    background-image: -webkit-linear-gradient(#7BBBF7, #338CDF);
       
    background-image: -o-linear-gradient(#7BBBF7, #338CDF);
       
    background-image: -ms-linear-gradient(#7BBBF7, #338CDF);
       
    background-imagelinear-gradient(#7BBBF7, #338CDF);
       
    border-bottom6px solid #1F6DB6;
       
    text-shadow0 1px 2px #000;
       
    color#fff;


    Если не нужен эффект тени при наведении мыши на меню, то это можно удалить:

    PHP код:
    #menu-out:hover {
       
    -moz-box-shadow0 0px 5px rgba(0,0,0,.7);
       -
    webkit-box-shadow0 0px 5px rgba(0,0,0,.7);
       
    box-shadow0 0px 5px rgba(0,0,0,.7);


  2. #2
    Аватар для L0ndl3m
    Пользователь

    Статус
    Оффлайн
    Регистрация
    19.10.2013
    Адрес
    Ярославль
    Сообщений
    1,366
    Репутация:
    774 ±
    Красиво, молодец.
    Последний раз редактировалось L0ndl3m; 11.12.2013 в 22:10.

  3. #3
    Аватар для - John.Besson
    Пользователь

    Статус
    Оффлайн
    Регистрация
    10.12.2013
    Адрес
    Украина, Киев
    Сообщений
    20
    Репутация:
    4 ±
    Цитата Сообщение от Londlem Посмотреть сообщение
    Красиво, молодец.
    В ретро стиле - мне кажется лучше. Но тут смотря от дизайна форума и тематики.

 

 

Информация о теме

Пользователи, просматривающие эту тему

Эту тему просматривают: 1 (пользователей: 0 , гостей: 1)

Ваши права

  • Вы не можете создавать новые темы
  • Вы не можете отвечать в темах
  • Вы не можете прикреплять вложения
  • Вы не можете редактировать свои сообщения
  •