Горизонтальное меню с прокруткой, сделанное на CSS и jQuery | Participants
|
- Statistics
- Participants
- Translate into Russian
- Translation result
- Translated in draft, editing and proof-reading required.
If you do not want to register an account, you can sign in with OpenID.
Horizontal Scrolling Menu made with CSS and jQuery | Горизонтальное меню с прокруткой, сделанное на CSS и jQuery | |
There are a lot of cool flash scrolling menus out there, but I decided to make a similarly looking menu with just CSS and jQuery. I couldn’t achieve the same smoothness in animation, but anyway I’m really satisfied with the result. My menu works fine in all major browsers and degrades gracefully when Javascript is turned off. | Существует довольно много классных меню с прокруткой на Flash, но я решил сделать аналогичное меню, используя только CSS и jQuery. Я не смог достичь той же гладкости в анимации, но все же я очень доволен результатом. Мое меню работает во всех популярных браузерах и изящно исчезает, когда JavaScript отключён. | |
In case you need a vertical version of a scrolling menu, please go to my newer tutorial. | В случае, если вам понадобится вертикальная версия меню с прокруткой, пожалуйста, обратитесь к моему новому руководству. | |
View the Result | ||
Creating markup | ||
Let’s begin by creating the necessary HTML structure. We will use an unordered list with each list item containing an image and a caption. We will also add an additional wrapper element. | Давайте начнем с создания требуемой структуры HTML. Мы будем использовать неупорядоченный список, каждая статья которого содержит картинку и заголовок. Также мы добавим дополнительный внешний контейнер. | |
<div class="sc_menu"> | ||
<ul class="sc_menu"> | ||
<li><a href="#"> | ||
<img src="img/1.jpg" alt="Menu"/><span>Menu</span> | <img src="img/1.jpg" alt="Menu"/><span>Menu</span> | |
</a></li> | ||
<li><a href="#"> | ||
<img src="img/2.jpg" alt="Navigation"/><span>Navigation</span> | <img src="img/2.jpg" alt="Navigation"/><span>Navigation</span> | |
</a></li> | ||
<li><a href="#"> | ||
<img src="img/3.jpg" alt="Scrolling"/><span>Scrolling</span> | <img src="img/3.jpg" alt="Scrolling"/><span>Scrolling</span> | |
</a></li> | ||
<li><a href="#"> | ||
<img src="img/4.jpg" alt="jQuery"/><span>jQuery</span> | <img src="img/4.jpg" alt="jQuery"/><span>jQuery</span> | |
</a></li> | ||
</ul> | ||
</div> | ||
Adding basic styling | ||
Now we need to add some some CSS rules. | Теперь нам необходимо добавить некоторые CSS-правила | |
div.sc_menu { | ||
/* Set it so we could calculate the offsetLeft */ | /* Устанавливаем это, чтобы посчитать offsetLeft */ | |
position: relative; | ||
height: 145px; | ||
width: 500px; | ||
/* Add scroll-bars */ | ||
overflow: auto; | ||
} | ||
ul.sc_menu { | ||
display: block; | ||
height: 110px; | ||
/* Max width here, for users without Javascript */ | /* Здесь максимальная ширина, для пользователей с отключенным JavaScript */ | |
width: 1500px; | ||
padding: 15px 0 0 15px; | ||
/* Remove default margin */ | ||
margin: 0; | ||
background: url('navigation.png'); | ||
list-style: none; | ||
} | ||
.sc_menu li { | ||
display: block; | ||
float: left; | ||
padding: 0 4px; | ||
} | ||
.sc_menu a { | ||
display: block; | ||
text-decoration: none; | ||
} | ||
.sc_menu span { | ||
/* We want a caption to display on the next line */ | /* Мы хотим отобразить заголовок в следующей строке*/ | — не уверен что я вычиткой занимаюсь)) — space_indus |
display: block; | ||
margin-top: 3px; | ||
text-align: center; | ||
font-size: 12px; | ||
color: #fff; | ||
} | ||
The “width” and “overflow” properties are used to add a scroll-bar to the wrapper div. We set the “position” property for easier offset calculation with Javascipt. Don’t forget that offset is always calculated relative to the positioned parent. You can view what we’ve done so far here | Свойства «width» и «overflow» используются для добавления полосы прокрутки в div-контейнере. Мы установили свойство «position» для упрощения расчёта отступов с Javascipt. Не забывайте, что расчет отступов всегда вычисляется относительно позиционированного родительского элемента. Вы можете посмотреть, что у нас получилось |
— не уверен в слове "исчезает". Но "отключается" сюда не очень подходит. — space_indus