Навигация с возможностью свободного перетаскивания пунктов меню, с помощью плагина jQuery UI.
Первым делом нам нужно подключить необходимые скрипты, перед закрывающим тегом
Теперь в нужном вам месте ставим html структуру нашего меню:
Уже теперь, без оформления, эффект перетаскивания будет работать, достаточно зажать левую клавишу мыши на любом из пунктов меню и начать перемещение. Но гораздо интереснее когда меню выглядит красиво.
В тему вашего стиля добавляем:
В навигации используется одно небольшое изображение: ( )
Загрузите её на сайт и не забудьте в CSS указать к ней путь в соответствующем поле.
Первым делом нам нужно подключить необходимые скрипты, перед закрывающим тегом
</head>
ставим:
Код: Выделить всё
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<script>
$(function() {
$( "#sortable" ).sortable({
placeholder: "ui-sortable-placeholder"
});
});
</script>
Код: Выделить всё
<ul id="sortable">
<li class="ui-state-default"><a href="#">Пункт 1</a></li>
<li class="ui-state-default"><a href="#">Пункт 2</a></li>
<li class="ui-state-default"><a href="#">Пункт 3</a></li>
<li class="ui-state-default"><a href="#">Пункт 4</a></li>
<li class="ui-state-default"><a href="#">Пункт 5</a></li>
<li class="ui-state-default"><a href="#">Пункт 6</a></li>
<li class="ui-state-default"><a href="#">Пункт 7</a></li>
</ul>
В тему вашего стиля добавляем:
Код: Выделить всё
.ui-sortable {
width: 350px;
margin: 50px auto;
background-color: #ccc;
-webkit-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, .1);
box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, .1);
list-style-type: none;
padding: 0;
}
.ui-sortable li.ui-state-default {
margin: 0;
height: 45px;
line-height: 48px;
font-size: 1.1em;
font-family: Helvetica, Verdana, Arial, sans-serif;
color: #fff;
outline: 0;
padding: 0;
text-indent: 15px;
background: rgb(78,82,91);
background: -moz-linear-gradient(top, rgb(78,82,91) 0%, rgb(57,61,68) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(78,82,91)), color-stop(100%,rgb(57,61,68)));
background: -webkit-linear-gradient(top, rgb(78,82,91) 0%,rgb(57,61,68) 100%);
background: -o-linear-gradient(top, rgb(78,82,91) 0%,rgb(57,61,68) 100%);
background: -ms-linear-gradient(top, rgb(78,82,91) 0%,rgb(57,61,68) 100%);
background: linear-gradient(to bottom, rgb(78,82,91) 0%,rgb(57,61,68) 100%);
border-top: 1px solid rgba(255,255,255,.2);
border-bottom: 1px solid rgba(0,0,0,.5);
text-shadow: -1px -1px 0px rgba(0,0,0,.5);
position: relative;
cursor: pointer;
}
.ui-sortable li.ui-state-default:first-child {
border-top: 0;
}
.ui-sortable li.ui-state-default:last-child {
border-bottom: 0;
}
.ui-sortable-placeholder {
border: 3px dashed #aaa;
height: 45px;
width: 344px;
background: #ccc;
}
.ui-sortable li.ui-state-default:after {
content: "";
display: inline-block;
background: url("/images/drag-n-drop-line.png") no-repeat 0 0;
width: 20px;
height: 17px;
position: absolute;
right: 18px;
top: 15px;
cursor: move;
opacity: .2;
}
.ui-sortable li.ui-state-default a {
color: #fff;
text-decoration: none;
}
.ui-sortable li.ui-state-default a:hover {
color: #ccc;
}
Загрузите её на сайт и не забудьте в CSS указать к ней путь в соответствующем поле.
Комментарии: 2