Ответить
Все мы привыкли к меню сайтов. Чаще всего это горизонтальный или вертикальный блок из ссылок. А что если сделать что-то особенное, к примеру меню в стиле дока?
В Интернете есть примеры доков, выполненных на основе JavaScript, а в этой статье давайте разберём пример без использования JavaScript.
Общий вид html:
И css:
Подробно разобрано в статье по адресу
Автор: modos189
1
Web Dock
Отправлено: 8 Ноя 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>
<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;
}
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;
}
Подробно разобрано в статье по адресу
Автор: modos189
Отредактировано автором 8 Ноя 2011
Отправлено: 8 Ноя 2011#2
++ будем пробовать)
Добавлено2011.11.08 17-20
чет не совсем получилось поставить
Добавлено2011.11.08 17-20
чет не совсем получилось поставить
Отправлено: 8 Ноя 2011#4
прописываю
иконка выводится в верху экрана
а не в низу
прописываю
иконки не выводятся только низ выводится
Добавлено2011.11.08 17-37
Сашка_из_Шебекино, вот зайди сейчас прописал
<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:
<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>
<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>
<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
Сашка_из_Шебекино, вот зайди сейчас прописал
<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>
Отправлено: 8 Ноя 2011#6
на что исправить?
Добавлено2011.11.08 17-51
вставил
Добавлено2011.11.08 17-52
теперь при наведении на иконку в верху экрана она переносится на свое место но все равно чтот не так . глянь
Добавлено2011.11.08 18-06
о вроде получилось))
Добавлено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;
}
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
о вроде получилось))
1
Зарегистрируйтесь или авторизуйтесь что бы писать
Сейчас online: 11. Зарегистрированных: 0. Гостей: 11.