Все для веб-дизайнера
Как создать простые элементы списка
На сайтах часто встречаются элементы списка, но зачастую они выглядят одинаково и не привлекают взор посетителей, по этому в данном уроке , я расскажу как можно разнообразить ваши списки применив к ним пару красивых эффектов. И так украсим наш список эффектами jQuery, посмотрим что у нас получилось…
По традиции предлагаю просмотреть online готовый образец, или просто скачать исходники:
1.И так, теперь рассмотрим сам код и с чем его едят, для начала мы рассмотрим jQuery, данный код необходимо вставить между тегами <body></body>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript"> $(function() { $('#menu li:even').addClass('even'); $('#menu li:odd').addClass('odd'); $('#menu li:even:last').addClass('last'); $('#menu li:even').click( function() { $('#menu li:even').toggle(500); $(this).toggle(500); $(this).next().slideToggle(); } ); }); </script> |
Что мы сделали этим кодом? мы разделили наш список на первый и второй столбец, первый столбец нам будет виден, а второй будет скрытый. При нажатии на первый , будет с анимацией появляться второй, в этом и заложен принцем фишки нашего списка.
2.Вторым этапом будет СSS, тут мы рассмотрим оформление нашего списка и позиционирование его на нашей страничке:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<style type="text/css"> * { padding: 0; margin: 0; } body { font-family:verdana; font-size:12px; padding: 0; margin: 0; background: #000000 url(images/header.jpg) no-repeat center top; width: 100%; display: table; } #menu { width: 200px; border: 1px; padding: 330; } #menu li { list-style-type: none; border-bottom: 1px solid #000000; } #menu li.odd { font-size: 90%; padding: 15px 25px; } #menu a { display: block; width: 184px; color: #800F25; text-decoration: none; padding: 10px 20px; } #menu li.even { background-color: #c3e425; } #menu li.odd { background-color: #fff; display: none; } #menu li.odd a { color: black; } #menu li.last { border-bottom: none; } p { padding-bottom: 20px; } </style> |
3. HTML. И последним этапом будет оглавление и заполнение нашего списка нужной информацией.
|
1 2 3 4 5 6 7 8 |
<ul id="menu"> <li><a href="#">Главная</a></li> <li>Rudebox | Все для веб-дизайнера</li> <li><a href="#">О сайте</a></li> <li>Информационный блог,в котором публикуются новости веб-дизайна.</li> <li><a href="#">Реклама</a></li> <li>Все вопросы по размещению рекламы обращаться к администратору сайта</li> </ul> |
Вот на этом и все, надеюсь урок вам был полезен)
| Опубликовал Cooper 10.07.2011 в 01:09, в категории jQuery. Вы можете следить за комментариями через RSS 2.0. Вы можете оставить комментарий или трэкбэк с вашего сайта. |
