Удаление папки /install/ - обязательно!

Файловый Архив

  • Неограниченное количество категорий и суб-категорий
  • Настройки прав доступа по группам
  • Настройки прав доступа по каждой категории
  • Предпросмотр медиа файлов: FLV, IFLV, F4A, F4V, MP4, MP3, MOV и других...
  • Мультизагрузка файлов - SWFUploader
  • Добавление файлов с сервера
Подробности и история обновлений продукта в этой теме
Loading

Go Back   форум vBSupport.org > > >
Register Изображения Меню vBsupport Files Manager Аллея Звёзд Реклама на форуме Search Today's Posts Mark Forums Read
  • Мемберка
  • Администраторам
  • Premoderation
  • For English speaking users
  • Изменения в правах
  • Каталог Фрилансеров
Пароли на скачивание файлов в Member Area меняются автоматически каждый день
Если вам нужно скачать какой то скрипт, за паролем ко мне в ЛС
привет какирам kerk
Ещё раз обращаем Ваше внимание: всё, что Вы скачиваете и устанавливаете на свой форум, Вы устанавливаете исключительно на свой страх и риск.
Сообщество vBSupport'а физически не в состоянии проверять все стили, хаки и нули, выкладываемые пользователями.
Помните: безопасность Вашего проекта - Ваша забота.
Убедительная просьба: при обнаружении уязвимостей или сомнительных кодов обязательно отписывайтесь в теме хака/стиля
Спасибо за понимание
На форуме введена премодерация ВСЕХ новых пользователей

Почта с временных сервисов, типа mailinator.com, gawab.com и/или прочих, которые предоставляют временный почтовый ящик без регистрации и/или почтовый ящик для рассылки спама, отслеживается и блокируется, а так же заносится в спам-блок форума, аккаунты удаляются
for English speaking users:
You may be surprised with restriction of access to the attachments of the forum. The reason is the recent change in vbsupport.org strategy:

- users with reputation < 10 belong to "simple_users" users' group
- if your reputation > 10 then administrator (kerk, Luvilla) can decide to move you into an "improved" group, but only manually

Main idea is to increase motivation of community members to share their ideas and willingness to support to each other. You may write an article for the subject where you are good enough, you may answer questions, you may share vbulletin.com/org content with vbsupport.org users, receiving "thanks" equal your reputation points. We should not only consume, we should produce something.

- you may:
* increase your reputation (doing something useful for another members of community) and being improved
* purchase temporary access to the improved category:
10 $ for 3 months. - this group can download attachments, reputation/posts do not matter.
20 $ for 3 months. - this group can download attachments, reputation/posts do not matter + adds eliminated + Inbox capacity increased + files manager increased permissions.

Please contact kerk or Luvilla regarding payments.

Important!:
- if your reputation will become less then 0, you will be moved into "simple_users" users' group automatically.*
*for temporary groups (pre-paid for 3 months) reputation/posts do not matter.
Не можете скачать вложение?
Изменения в правах групп пользователей
внимательно читаем эту и эту темы
Короткая версия - тут
Уважаемые пользователи!

На форуме открыт новый раздел "Каталог фрилансеров"

и отдельный раздел для платных заказов "Куплю/Закажу"

 
 
Old  
Славка
Специалист
 
Славка's Avatar
Default [Статья] Меню в стиле Windows Vista 7

Иногда необходимо добавить на форум, ну или на сайт, дополнительное или основное меню.

Попробую рассказать как сделать меню в стиле Windows Vista.

Вот так оно будет выглядеть:



Ну и сразу ссылочка на живой образец того, что мы будем делать.

Для начала создадим само меню с помощью списка, применяя тег <ul>. Каждый элемент <li> будет отдельной кнопкой. Если нам понадобится добавить новую кнопку, внутри <ul> просто добавим еще один <li>. Список поместим внутрь дива и пропишем ему id, чтоб можно было установить для него свой стиль.

Базовый код имеем следующего вида:

HTML Code:
<div id="vista_toolbar">
<ul>
 <li>...</li>
 <li>...</li>
</ul>
</div>
Для создания самой полосы меню мы будем использовать картинку back.gif которую размножим на нужную длинну, а для создания кнопок используем 2 картинки
left.png и right.png

Вот так они выглядят: и
Их мы пропишем в стиле, но об этом ниже.

Теперь создаём сами кнопки:

HTML Code:
<li>
<a href="#">
<span>
<img align="left" src="add.gif" alt="add new"/>Add New
</span>
</a>
</li>
Здесь я думаю всем понятно, что # заменяем на ссылку назначения кнопки,
а с помощью img мы вставляем в кнопку картинку-иконку. Если она не нужна, то просто удаляем эту строку.
Обращаем внимание на пути к картинке и не забываем указать свои ;)

В итоге для нашего примера мы получаем вот такой вот код меню:

HTML Code:
<div id="vista_toolbar">
<ul>
<li><a href="#"><span><img align="left" src="add.gif"
alt="add new" />Новое</span></a></li>
<li><a href="#"><span><img align="left" src=
"mail.gif" alt="check mail" />Сообщения</span></a></li>
<li><a href="#"><span><img align="left" src=
"chart.gif" alt=
"statistic" />Статистика</span></a></li>
<li><a href="#"><span><img align="left" src=
"mona.gif" alt="my pictures" />Мои рисунки</span></a></li>
<li><a class="right" href="#"><span><img align="left" src=
"sos.gif" alt="help" />Помощь</span></a></li>
</ul>
</div>
Остаётся прописать стили:

HTML Code:
#vista_toolbar {
    float: left;
    font: 12px 'Trebuchet MS',Arial;
    margin: 0;
    padding: 0;
}
#vista_toolbar ul {
    background-image: url("back.gif");
    background-repeat: repeat-x;
    float: left;
    line-height: 32px;
    list-style: none outside none;
    margin: 0;
    padding: 0 10px;
    width: 500px;
}
#vista_toolbar li {
    display: inline;
    padding: 0;
}
#vista_toolbar a {
    color: #FFFFFF;
    float: left;
    padding: 0 3px;
    text-decoration: none;
}
#vista_toolbar a span {
    display: block;
    float: none;
    padding: 0 10px 0 7px;
}
#vista_toolbar a span img {
    border: medium none;
    margin: 8px 4px 0 0;
}
#vista_toolbar a:hover {
    background: url("left.png") no-repeat scroll left center transparent;
}
#vista_toolbar a:hover span {
    background: url("right.png") no-repeat scroll right center transparent;
}
#vista_toolbar a.right {
    float: right;
}
Тут вроде всё понятно ;)
В #vista_toolbar стиль нашего дива, в частности используемые шрифты
Размеры, отступы и фон меню задаём в #vista_toolbar ul
Ну и далее мы видим что будет происходить при наведении на ссылку.
Рекомендую читать вот эту сказку ;) узнаете много интересного ;)

Чуть не забыл

Код меню вставляем в необходимое место, например в шаблон navbar, при необходимости используем таблицу.
Например в таком виде:

HTML Code:
<table width="100%" border="0">
  <tr>
    <td>
код меню
</td>
  </tr>
</table>
А код стиля меню добавляем в дополнительные определения CSS, во второе окошко.

Ну вот вроде и всё ;) В архиве картинки-исходники нашего образца меню.
Attached Files
File Type: rar menu.rar (9.6 KB, 15 views)

Last edited by Славка : 03-12-2012 at 12:52 AM.
 
Bot
Yandex Bot Yandex Bot is online now
 
Join Date: 05.05.2005
Реклама на форуме А что у нас тут интересного? =)
 

Tags
меню

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off




All times are GMT +4. The time now is 04:20 PM.


Powered by vBulletin® Version Random
Copyright ©2000 - 2016, Jelsoft Enterprises Ltd.