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

Web Dock

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

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


Все мы привыкли к меню сайтов. Чаще всего это горизонтальный или вертикальный блок из ссылок. А что если сделать что-то особенное, к примеру меню в стиле дока?
В Интернете есть примеры доков, выполненных на основе JavaScript, а в этой статье давайте разберём пример без использования JavaScript.

Общий вид html:
Code:
<nav> 
 <span id="dock_p"> 

 <a href="http://modostroi.ru/"><span class="dock_text">Модострой</span><img class="ico" src="путь" alt="#" /></a>
 ...тут ещё иконки...
 <a href="http://modostroi.ru/"><span class="dock_text">Модострой</span><img class="ico" src="путь" alt="#" /></a>

 </span> 
 </nav>

И css:

Code:
nav { 
 width: 1000px; 
 height: 10px; 
 text-align: center; 
 position: fixed; 
 bottom: 0px; 
 left: 50%; 
 margin-left: -500px;

 border-top: 2px solid rgba(136,128,138,0.5);
 border-radius: 10px 10px 0 0; 
 background-color: rgba(117,122,122,0.5); 
 -o-transition: all 0.5s ease;
 -moz-transition: all 0.5s ease;
 -webkit-transition: all 0.5s ease;
 transition: all 0.5s ease;
 }

 nav:hover { 
 width: 1000px; 
 height: 100px; 
 text-align: center; 
 position: fixed; 
 bottom: 0px; 
 left: 50%; 
 margin-left: -500px;
 border-top: 0;
 background-color: transparent;
 }

 .ico { 
 width: 46px; 
 height: 38px; 
 margin-top: 55px; 
 -o-transition: all 0.5s ease; 
 -moz-transition: all 0.5s ease; 
 -webkit-transition: all 0.5s ease; 
 transition: all 0.5s ease; 
 } 

 .ico:hover { 
 width: 69px; 
 height: 57px; 
 margin-top: 20px; 
 } 

 #dock_p { 
 background-color: rgba(117,122,122,0.5); 
 border-radius: 40px 40px 0 0; 
 padding-right: 15px; 
 padding-left: 15px; 
 padding-bottom: 5px; 
 } 

 .dock_text { 
 display:none; 
 color: #FFF; 
 font-size: 13pt; 
 font-weight: bold; 
 text-shadow: #000 0 0 15px; 
 } 

 a:hover .dock_text { 
 display:inline; 
 width: 300px; 
 position: fixed; 
 bottom: 80px; 
 left: 50%; 
 margin-left: -150px; 
 }

Подробно разобрано в статье по адресу http://modostroi.ru/stat/web_dock.htm

Автор: modos189

Отредактировано автором 8 Ноя 2011

BAH0

  • Атом-фан
  • Пользователь
  • 544
  • Репутация:26 
  • Предупреждения: 0 
  • Регистрация:
    7 Июн 2011
#2
++ будем пробовать)

Добавлено2011.11.08 17-20

чет не совсем получилось поставить

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

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

BAH0

  • Атом-фан
  • Пользователь
  • 544
  • Репутация:26 
  • Предупреждения: 0 
  • Регистрация:
    7 Июн 2011
#4
прописываю
Code:
<nav>
<span id="dock_p">
<a href="http://codetrust.ru"><span class="dock_text">Пользователи</span><img class="ico" src="template/12/img/6.png" alt="Пользователи" /></a>
</span>
</nav>
иконка выводится в верху экрана
а не в низу

прописываю


Code:
<div class="nav">
<span id="dock_p">

<a href="http://codetrust.ru"><span class="dock_text">Пользователи</span><img class="ico" src="template/12/img/6.png" alt="Пользователи" /></a>
</span>
</div>
иконки не выводятся только низ выводится

Добавлено2011.11.08 17-37

Сашка_из_Шебекино, вот зайди http://codetrust.ru/ сейчас прописал
<nav>
<span id="dock_p">
<a href="http://codetrust.ru"><span class="dock_text">Пользователи</span><img class="ico" src="template/12/img/6.png" alt="Пользователи" /></a>
</span>
</nav>

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

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

BAH0

  • Атом-фан
  • Пользователь
  • 544
  • Репутация:26 
  • Предупреждения: 0 
  • Регистрация:
    7 Июн 2011
#6
на что исправить?

Добавлено2011.11.08 17-51

вставил
Code:
nav { 
 width: 1000px; 
 height: 10px; 
 text-align: center; 
 position: fixed; 
 bottom: 0px; 
 left: 50%; 
 margin-left: -500px;

 border-top: 2px solid rgba(136,128,138,0.5);
 border-radius: 10px 10px 0 0; 
 background-color: rgba(117,122,122,0.5); 
 -o-transition: all 0.5s ease;
 -moz-transition: all 0.5s ease;
 -webkit-transition: all 0.5s ease;
 transition: all 0.5s ease;
 }

 nav:hover { 
 width: 1000px; 
 height: 100px; 
 text-align: center; 
 position: fixed; 
 bottom: 0px; 
 left: 50%; 
 margin-left: -500px;
 border-top: 0;
 background-color: transparent;
 }

 .ico { 
 width: 46px; 
 height: 38px; 
 margin-top: 55px; 
 -o-transition: all 0.5s ease; 
 -moz-transition: all 0.5s ease; 
 -webkit-transition: all 0.5s ease; 
 transition: all 0.5s ease; 
 } 

 .ico:hover { 
 width: 69px; 
 height: 57px; 
 margin-top: 20px; 
 } 

 #dock_p { 
 background-color: rgba(117,122,122,0.5); 
 border-radius: 40px 40px 0 0; 
 padding-right: 15px; 
 padding-left: 15px; 
 padding-bottom: 5px; 
 } 

 .dock_text { 
 display:none; 
 color: #FFF; 
 font-size: 13pt; 
 font-weight: bold; 
 text-shadow: #000 0 0 15px; 
 } 

 a:hover .dock_text { 
 display:inline; 
 width: 300px; 
 position: fixed; 
 bottom: 80px; 
 left: 50%; 
 margin-left: -150px; 
 }

Добавлено2011.11.08 17-52

теперь при наведении на иконку в верху экрана она переносится на свое место но все равно чтот не так . глянь

Добавлено2011.11.08 18-06

о вроде получилось))

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

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

Отредактировано автором 9 Ноя 2011

Drunya

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

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