Изображение
Навигация с возможностью свободного перетаскивания пунктов меню, с помощью плагина jQuery UI.

Первым делом нам нужно подключить необходимые скрипты, перед закрывающим тегом </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>
Теперь в нужном вам месте ставим html структуру нашего меню:

Код: Выделить всё

<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

Дим 28 дек 2013, 14:27 Сообщение

Как я понял, после того как перезагрузили страницу - пункты меню встанут в прежнем порядке...
  • 0

CabinetAdmin 28 дек 2013, 15:41 Сообщение

К сожалению да. Видел в интернетах способы прикручивания куков, но всё это было не очень удачно.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!