I have a challenge with CSS and Jquery Sortables. I am extremely new to Jquery so I have no idea how to achieve this.
Here is the goal:
- To have a horizontal plane of Parent Menus. Parent menus can be sorted by dragging them from right to left. Each Parent Menu Has its own unique ID.
- Each parent menu can have 0 - unlimited sub menus.
- Sub menus show up in a vertical fashion.
- Sub menus can be sorted (up and down)
- sub menus can also be moved to a different parent menu.
I have tried to accomplish this with sortables and nested ULs. I have tried connected lists and nothing works =(
can someone please help me with a simple sample of 3 parent menus each having 3 sub menus. My goal is to be able to move the sub menus to one parent, and re arrange the parents in the horizontal panel.
After each change a text box within a form on the page gets a serialized list of all the menus.
Here is what i have so far. But no jquery code:
Thanks in advance
Frank
<style type="text/css">
body {
font-family: Arial;
font-size:12pt;
padding:20px;
width: 800px;
margin:auto;
border:solid 1px black;
padding-top: 20px;
margin-top:20px;
}
h1 {
font-size: 16pt;
}
h2 {
font-size: 13pt;
}
ul {
margin:0px;
padding:0px;
margin-left:20px;
}
.menuholder {
background-color:#000;
width:100%;
height:35px;
}
#AllMenus {
width:100%;
margin:0px;
padding:0px;
margin-left:0px;
list-style-type:none;
border:none;
font-size:10px;
}
#AllMenus li {
float:left;
min-width:100px;
border:none;
padding:0px;
margin:0px;
}
#AllMenus li div {
height:33px;
min-width:114px;
margin:0px;
border:solid 1px black;
text-align:center;
vertical-align:top;
}
.parentmenu_item {
width:100px;
background-color:#000;
color:#FFF;
border:1px solid black;
padding-top:10px;
padding-bottom:9px;
padding-right:6px;
padding-left:6px;
text-align:center;
display:block;
margin-bottom:0px;
border-right:#242424 1px solid;
vertical-align:top;
}
.placeHolder div {
background-color: #0FF !important;
border: dashed 1px gray !important;
width:53px;
}
#babylist, #babylist2, #babylist3, #babylist4 {
width:114px;
list-style-type: none;
margin:0px;
border:none;
padding:0px;
padding:none;
}
#babylist li, #babylist2 li, #babylist3 li, #babylist4 li {
float:left;
width:100px;
background-color:#333;
color:#CCC;
text-align:left;
padding:6px;
border-bottom:1px solid #000;
}
</style>
</head>
<body>
<h1>jQuery List DragSort Example</h1>
<a href="http://dragsort.codeplex.com/">Homepage</a><br/>
<br/>
<h2>PARENT MENUS</h2>
<form name="sortForm" method="get">
<input name="ParentsortOrder" type="text" id="ParentsortOrder" size="100">
<button type="submit" class="submit3" name="submit"><span>Save & Continue...</span></button>
</form>
<div style="clear:both;"></div>
<br />
<br />
<div style="background-image:url(../Users/all/bkri/fs/phase_8.jpg); min-width:500px; height:500px; max-width:1920px;">
<div class="menuholder">
<!--For Background Menu Bar -->
<!--Menus List -->
<ul id="AllMenus">
<!--Top Menu -->
<li id="P1">
<div> <span class="parentmenu_item"> Menu 1 </span>
<!--Child Menus -->
<ul id="babylist">
<li id="s1"><span id="spandex">My Pictures </span></li>
<li id="s2"><span id="spandex">My Music </span></li>
<li id="s3"><span>My Docs </span></li>
<li id="s4"><span>My Friends </span></li>
<li id="s5"><span>My Books </span></li>
<li id="s6"><span>My Computer </span></li>
<li id="s7"><span>My Network </span></li>
<li id="s8"><span>My Test </span></li>
</ul>
</div>
</li>
<!--Top Menu -->
<li id="P2">
<div> <span class="parentmenu_item"> Menu 2 </span>
<!--Child Menus -->
<ul id="babylist2">
<li id="s9"><span>Milk</span></li>
<li id="s10"><span>Cheese </span></li>
<li id="s11"><span>Eggs </span></li>
<li id="s12"><span>Bacon </span></li>
<li id="s13"><span>Flour </span></li>
</ul>
</div>
</li>
<!--Top Menu -->
<li id="P3">
<div> <span class="parentmenu_item"> Menu 3 </span>
<!--Child Menus -->
<ul id="babylist3">
<li id="s14"><span>Cow</span></li>
<li id="s15"><span>Pig </span></li>
<li id="s16"><span>Horse </span></li>
<li id="s17"><span>Lamb </span></li>
</ul>
</div>
</li>
<!--Top Menu -->
<li id="P4">
<div> <span class="parentmenu_item"> Menu 4 </span>
<!--Child Menus -->
<ul id="babylist4">
<li id="s19"><span>Bob</span></li>
<li id="s20"><span>Kevin </span></li>
<li id="s21"><span>Nancy </span></li>
<li id="s22"><span>Stacy </span></li>
<li id="s23"><span>Rochelle </span></li>
</ul>
</div>
</li>
</ul>
</div> <!--End Top Menu Bkr -->
</div> <!--End Background -->
