I have been trying unsuccessfully to create a drop down menu for my navbar, every single CSS method doesnt seem to provide the desired effect that I require. Currently my HTML looks like....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled</title>
</head>
<!-- Reset Sheet -->
<link href="reset.css" rel="stylesheet" type="text/css">
<!-- Main Sheet -->
<link href="main.css" rel="stylesheet" type="text/css">
<!-- Navigation Menu Sheet -->
<link href="navbar.css" rel="stylesheet" type="text/css">
<body>
<table id="header">
<table width="100%" style="height: 100%;" cellpadding="10" cellspacing="0" border="0">
<!-- Table containing logo -->
<tr>
<td colspan="2" valign="middle" height="30" align="center">
<img src="logo.JPG" alt="logo" width="570" >
</td></tr>
<!-- Table containing NavBar -->
<tr>
<td colspan="2" valign="middle" height="55" bgcolor="#300000" align="center">
<div class="navbar">
<ul class="horizontal">
<li><a class="first" href="#">Home</a></li>
<li>About Us</li>
<li>Our Products</li>
<li>Environment</li>
<li>Latest News</li>
<li><a class="last" href="#">Contact Us</a></li>
</ul>
</div>
</td></tr>
</table>
</body>
</html>
And to compliment that my CSS for the navbar looks like...
.navbar ul.horizontal
{
list-style-type:none;
margin:40 auto;
width:640px;
padding:0;
overflow:hidden;
}
.navbar ul.horizontal > li
{
float:left;
}
.navbar ul.horizontal li a
{
display: block;
text-decoration:none;
text-align:center;
padding:22px 20px 22px 20px;
font-family:Arial;
font-size:8pt;
font-weight:bold;
color:#FFFFFF;
text-transform:uppercase;
border-right:1px solid #607987;
background-color:#300000;
letter-spacing:.08em
}
.navbar ul.horizontal li a:hover
{
background-color:#680000;
color:#a2becf
}
.navbar ul.horizontal li a.first
{
border-left:0
}
.navbar ul.horizontal li a.last
{
border-right:0
}
My question to the point is if I was to make this menu a drop down menu for the "The products" button following a similar style pattern (such as hover colours and background colours) to the rest of the navbar. how would I go about with CSS to achieve this.
The new HTML for the css in question being...
<div class="navbar">
<ul class="horizontal">
<li><a class="first" href="#">Home</a></li>
<li>About Us</li>
<li>Our Products</li>
<ul>
<li>Apple</li>
<li>HTC</li>
<li>Nokia</li>
<li>Samsung</li>
</ul>
<li>Environment</li>
<li>Latest News</li>
<li><a class="last" href="#">Contact Us</a></li>
</ul>
</div>
I have tried with so many attempts but have failed to achieve a proper result. Your help will be greatly appreciated. Thanks
I am not quite sure if this is what you mean, maybe it needs some style adjustment.
The thing is that your submenu list should be inside the list item of the main menu. Like this:
<ul>
<li>Item
<ul>
<li>...</li>
</ul>
</li>
</ul>
Using that in your code (and optimized the CSS), this is what I came up with:
HTML
<div class="navbar">
<ul class="horizontal">
<li>Home</li>
<li>About Us</li>
<li>Our Products
<ul>
<li>Apple</li>
<li>HTC</li>
<li>Nokia</li>
<li>Samsung</li>
</ul>
</li>
<li>Environment</li>
<li>Latest News</li>
<li>Contact Us</li>
</ul>
</div>
CSS:
.horizontal {
list-style-type:none;
margin:40 auto;
width:640px;
padding:0;
overflow:hidden;
}
.horizontal > li {
float:left;
}
.horizontal li ul {
display: none;
margin: 0;
padding: 0;
list-style: none;
position: relative;
width: 100%;
}
.horizontal li:hover ul {
display: block;
}
.horizontal li a {
display: block;
text-decoration:none;
text-align:center;
padding:22px 10px;
font-family:Arial;
font-size:8pt;
font-weight:bold;
color:#FFFFFF;
text-transform:uppercase;
border-right:1px solid #607987;
background-color:#300000;
letter-spacing:.08em
}
.horizontal li a:hover {
background-color:#680000;
color:#a2becf
}
.horizontal li:first-child a { border-left:0; }
.horizontal li:last-child a { border-right:0; }
Like said, you may need to change some of the styles!
Also check the working JSFiddle Demo
Related
The content from my html document is overlapping my navbar.
I have tried to add margins to my .main-nav in css but it did not work.
The example code has "Hello World" on top of my nav bar. I want to have a new section that starts right below the main navbar without using
.main-nav{
float:right;
list-style: none;
margin-top: 25px;
margin-bottom: 50px;
}
.main-nav li{
display: inline-block;
margin-left: 15px;
}
.section-test{
margin-top: 200px;
}
<body>
<nav>
<div class="row">
<img src="{% static 'resources/img/logo-transparent.png' %}" class="logo" alt=" Logo">
<ul class="main-nav">
<li>About</li>
<li>Log In</li>
<li>Get a Demo</li>
</ul>
</div>
</nav>
<section class="section-test">
<h3>hello world</h3>
</section>
</body>
use clear:both; on section-test class
/* Styles go here */
.main-nav{
float:right;
list-style: none;
margin-top: 25px;
margin-bottom: 50px;
}
.main-nav li{
display: inline-block;
margin-left: 15px;
}
.section-test{
clear: both;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<nav>
<div class="row">
<img src="{% static 'resources/img/logo-transparent.png' %}" class="logo" alt=" Logo">
<ul class="main-nav">
<li>About</li>
<li>Log In</li>
<li>Get a Demo</li>
</ul>
</div>
</nav>
<section class="section-test">
<h3>hello world</h3>
</section>
</body>
</html>
As you are using float: right on your nav element, it is out of the flow. What that means is that the nav parent doesn't takes it's height into account.
You have multiple solutions here. The first one is to apply an overflow:hidden to the nav element to force it to grow, to use a clear element as mentioned by Punith Jain, or simplify your markup and get rid of the floating with the usage of flexbox!
.row {
display: flex;
}
.main-nav{
text-align: right;
flex: 1;
}
.main-nav li{
display: inline-block;
margin-left: 15px;
}
<nav>
<div class="row">
<img src="{% static 'resources/img/logo-transparent.png' %}" class="logo" alt=" Logo">
<ul class="main-nav">
<li>About</li>
<li>Log In</li>
<li>Get a Demo</li>
</ul>
</div>
</nav>
<section>
<h3>hello world</h3>
</section>
First of all, I´m not very firm with CSS. I try to show an icon (right side) on my sidebar link (nav-first-level) on mouseover. The Sidebar-Link currently uses 100% of the Sidebar. Do you have a tip for me?
<ul>
<li class="nav-first-level">
<a class="facetGroup" href="#">Cardiology<span class="fa arrow"></span></a>
<span class="markGroup "><i class="fa fa-pencil fa-2" ></i></span>
<ul class="nav nav-second-level collapse">
<li ng-repeat="facet in cardiologyItems">
<span>{{ facet.name }}</span>
</li>
</ul>
</li>
</ul>
this should get you there, take a look (show image icon on rollover with CSS).
• Swap .image class with your .facetGroup > remove <span> use a <div> and swap demo .play class with your .markGroup. Basically follow how it's done below and customize with your selectors!
<div class="itemsContainer">
<div class="image"> <img src="http://www.itsalif.info/blogfiles/video-play/vthumb.jpg" /> </div>
<div class="play"><img src="http://cdn1.iconfinder.com/data/icons/flavour/button_play_blue.png" /> </div>
</div>
CSS:
.itemsContainer {
background:red;
float:left;
position:relative
}
.itemsContainer:hover .play{display:block}
.play{
position : absolute;
display:none;
top:20%;
width:40px;
margin:0 auto; left:0px;
right:0px;
z-index:100
}
Use li:hover property.Try this:
<html>
<body>
<style>
ul li ul li:hover {
list-style-image: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-forward-16.png');
}
ul li ul li
{
list-style-type: none;
}
</style>
<ul>
<li>Cardiology
<ul>
<li>citem1</li>
<li>citem2</li>
<li>citem3</li>
</ul>
</li>
<li>Other
<ul>
<li>oitem1</li>
<li>oitem2</li>
<li>oitem3</li>
</ul>
</li>
</ul>
</body>
</html>
Working JSFiddle sample: https://jsfiddle.net/t41w9u2w/2/
Hey so first of all I'm terrible with HTML. Div confuses the hell out of me. Now what I am trying to do, I want these two boxes to be centered on the middle of the page with about 20px between them.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="FirstCSS.css">
<title>Services and Rates</title>
</head>
<body style="background-color:pink;">
<div id="top" align="center">
<header>
<h1 style="color:purple">Services and Rates</h1>
<nav>
<hr color="purple" width="80%">
<table style="color:purple">
<tr>
<td style="padding-right: 50px">Home</td>
<td style="padding-right: 50px">About Me</td>
<td style="padding-right: 50px">Photo Gallery</td>
<td><a href="mqservicesandrates.html">Services and Rates</td>
</tr>
</table>
<hr color="purple" width="80%">
</nav>
</div>
<div id="embroideryrates" class="centeredlistleft" >
<h3 style="color:purple" align="center"> Embroidery </h3>
<ul>
<li>Colored Towel (Non White)
<ul>
<li>$12</li>
</ul>
</li>
<li>White Towel
<ul>
<li>$8</li>
</ul>
</li>
</ul>
</div>
<div id="quiltingrates" class="centeredlistright">
<h3 style="color:purple" align="center"> Quilting </h3>
<ul>
<li>Custom Made Quilt
<ul>
<li>$400</li>
</ul>
</li>
<li>Batting
<ul>
<li>$75</li>
</ul>
</li>
<li> Lessons
<ul>
<li> $50/hour</li>
</ul>
</li>
</ul>
</div>
Right now the two boxes for Embroidery and Quilting are on the far left and right. I just cannot seem to get them centered. And here is my CSS.
#charset "utf-8";
/* CSS Document */
.centeredlistleft {
width:300px;
margin:0 auto;
text-align:left;
border:2px solid;
float:left;
}
.centeredlistright {
width:300px;
margin:0 auto;
text-align:left;
border:2px solid;
float:right;
}
.body{
margin: 0;
padding:0;
text-align: center;
color: purple;;
}
I'm pretty sure I'm way off here and over complicating things but again the Div tag has never made sense to me and I just cannot seem to get a handle on it.
This works. Put a wrapper division for the two lists
<div id="listswrapper" >
<div id="embroideryrates" class="centeredlistleft" >
<div id="quiltingrates" class="centeredlistright">
</div>
Then do the styling as follows:
#listswrapper {
width: 640px;
margin: 0 auto;
text-align: center;
}
.centeredlistleft {
width:300px;
margin:0 auto;
text-align:left;
border:2px solid;
display: inline-block;
}
.centeredlistright {
width:300px;
margin:0 auto;
text-align:left;
border:2px solid;
display: inline-block;
}
Some points noted:
The solution given by q0re does not work (though I am not the one to downvote :)) due to float:left in the centeredlistleft division. Rather, both the lists (divs) should be displayed as inline block.
The solution by SKV might work (I have not tested) due to align="center" but that is a deprecated way of styling.
The solution by Sindhu applies center styling to the whole body. this may not be desirable if you want to control per-division. Also the content div with width 400px is unclear as your two divisions have a combined with of 600px plus border and padding.
Very important:
may be you incorrectly copied, but please make sure your HTML is always well formed. I see a missing end-body tag. In general such minor mistakes can (do) lead to time-consuming bugs for beginners.
happy web developing!
check it out LINK
add some css
#listboxes {
width: 660px;
margin: 0 auto;
text-align: center;
}
.centeredlistleft {
margin-right:10px;
}
.centeredlistright {
margin-left:10px;
}
try this sample......
change your css with the below css....
.content {
width: 400px;
margin: 0 auto;
background-color:lavender;
}
.body{
margin: 0;
padding:0;
text-align: center;
color: purple;;
}
for demo :http://jsfiddle.net/ypwjY/
use below code for result requested.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="FirstCSS.css">
<title>Services and Rates</title>
<style>
#charset "utf-8";
/* CSS Document */
.centeredlistleft {
width:300px;
margin:0 auto;
text-align:left;
border:2px solid;
float:left;
}
.centeredlistright {
width:300px;
margin:0 auto;
text-align:left;
border:2px solid;
float:right;
}
.body{
margin: 0;
padding:0;
text-align: center;
color: purple;;
}
.outerdiv {
width:635px;
}
.outermost {
}
</style>
</head>
<body style="background-color:pink;">
<div id="top" align="center">
<header>
<h1 style="color:purple">Services and Rates</h1>
<nav>
<hr color="purple" width="80%">
<table style="color:purple">
<tr>
<td style="padding-right: 50px">Home</td>
<td style="padding-right: 50px">About Me</td>
<td style="padding-right: 50px">Photo Gallery</td>
<td><a href="mqservicesandrates.html">Services and Rates</td>
</tr>
</table>
<hr color="purple" width="80%">
</nav>
</div>
<div class="outermost" align="center">
<div class="outerdiv">
<div id="embroideryrates" class="centeredlistleft" >
<h3 style="color:purple" align="center"> Embroidery </h3>
<ul>
<li>Colored Towel (Non White)
<ul>
<li>$12</li>
</ul>
</li>
<li>White Towel
<ul>
<li>$8</li>
</ul>
</li>
</ul>
</div>
<div id="quiltingrates" class="centeredlistright">
<h3 style="color:purple" align="center"> Quilting </h3>
<ul>
<li>Custom Made Quilt
<ul>
<li>$400</li>
</ul>
</li>
<li>Batting
<ul>
<li>$75</li>
</ul>
</li>
<li> Lessons
<ul>
<li> $50/hour</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
I am fairly new to web development and I have been trying to create a site, so far I have managed to do a navigation menu and a logo. My issue is that after thoroughly trying many tutorials and posts I have been unable to resolve my issue.
I want to align my logo with my navbar so that the logo is on the left hand side and the navbar is in line with the logo but on the right hand side, with both of them next to each other.
next questions is how to create a drop down menu for some of navbar tabs?
thankyou
My html is as follows
<!DOCTYPE html>
<html>
<head>
<title>S3ntry Aust Transport</title>
<link href="navbarlog.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container" id="Layout1" style="overflow: auto; ">
<header>
<div id="menu">
<img src="logo.JPG" style="float: left; " alt="logo" name="logo" width="571"
height="176" id="logo"></a>
</div>
</header>
<ul>
<li><a id="nav-index" class="first" href="%E2%80%9D#%E2%80%9D">Home</a></li>
<li><a id="nav-aboutus" href="%E2%80%9D#%E2%80%9D">About Us</a></li>
<li><a id="nav-ourservices" href="%E2%80%9D#%E2%80%9D">Our Services</a></li>
<li><a id="nav-environment" href="%E2%80%9D#%E2%80%9D">Environment</a></li>
<li><a id="nav-latestnews" href="#">Latest News</a></li>
<li><a id="nav-contactus" class="last" href="%E2%80%9D#%E2%80%9D">Contact Us</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
and the css part is as follows
ul {list-style-type:none; margin:0 auto; width:640px; padding:0; overflow:hidden;}li
{float:left;}
ul li a {display:block; text-decoration:none; text-align:center; padding:22px 20px 22px
20px;font-family:Arial; font-size:8pt; font-weight:bold; color:#000000; text-
transform:uppercase; border-right:1px solid #607987; background-color:#FFFFFF; text-
transform:uppercase; letter-spacing:.08em}
ul li a:hover {background-color:#3b6a85; color:#a2becf}
ul li a.first {border-left:0}
ul li a.last {border-right:0}}
#header ul li {
list-style: none;
display:inline-block;
float:right
}
logo.JPG
{
vertical-align:middle;
float:left
}
If you were to restructure your HTML, moving your 'ul' into the header, it's very easy.
<header>
<div id="logo">
<img src="logo.JPG" style="float: left; " alt="logo" name="logo" width="571" height="176" id="logo">
</div>
<div id="menu">
<ul>
<li><a id="nav-index" class="first" href="%E2%80%9D#%E2%80%9D">Home</a></li>
<li><a id="nav-aboutus" href="%E2%80%9D#%E2%80%9D">About Us</a></li>
<li><a id="nav-ourservices" href="%E2%80%9D#%E2%80%9D">Our Services</a></li>
<li><a id="nav-environment" href="%E2%80%9D#%E2%80%9D">Environment</a></li>
<li><a id="nav-latestnews" href="#">Latest News</a></li>
<li><a id="nav-contactus" class="last" href="%E2%80%9D#%E2%80%9D">Contact Us</a></li>
</ul>
</div>
</header>
and the CSS needed
header { width: 700px; }
#logo { float: left; }
#menu { float: right; }
#menu ul { padding: 0; margin: 0; }
Here is a JSFiddle showing it working: http://jsfiddle.net/STu89/
I've also removed a which wasn't opened and stripped out various /div which weren't matched.
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>
Homepage<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 -->
SOLVED IT!
TOOK ALL DAY,
Now just gotta figure out how to serialize the list..
Hope this code sample helps someone out there.
The css Reset linked should not make a different in this.
CSS is very sloppy on my part but it gets the job done.
Works in IE and Chrome.
Here is how it looks:
<html>
<head>
<title>jQueryUI Sortables</title>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="../Admin/resources/css/reset.css"/>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css">
body {
background-color: #CCC;
margin:25px;}
body,td,th {
font-family: Verdana, Geneva, sans-serif;
}
.all-menu {list-style-type:none; margin:0px; padding:0px; width:100%;}
.p-menu {width:115px; margin:0px; padding:0px; float:left; list-style-type:none; }
.p-menu-title {float:left; margin:0px; padding:0px; width:115px; background-color:#000; cursor:move; color:white; text-align:left; font-size:10px; font-weight:bold; border-bottom:1px solid #111; border-left:1px solid #111; text-align:center; padding-bottom:15px; padding-top:15px;}
.ui-state-highlight {float:left; margin:0px; height: 20px; width:100%; background-color:#AFA; text-align:left; padding:0px;; margin:0px; font-size:10px; border:2px green dashed;}
.ui-state-highlight-top {float:left; margin:0px; height: 40px; width:115px;; background-color:#aabeff; text-align:left; padding:0px;; margin:0px; font-size:10px; border:2px blue dashed;}
.all-sub-menu {list-style-type:none; margin:0px; padding:0px; width:115px; min-height:250px; display:block;}
.s-menu {width:115px; list-style-type:none; margin:0px; padding:0px; float:left;}
.s-menu-title {float:left; width:112px; background-color:#111; padding:10px; color:black; text-align:left; padding:0px; font-size:10px; border-bottom:1px solid #222; border-left:1px solid #222;padding-top:8px; padding-bottom:8px; color:#FFF; padding-left:3px; cursor:pointer;}
#drag-handle {cursor:move; margin:0px; padding:0px; width:500px;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body>
<form>
<input type="text" id="serialStr" size="150" />Serialized Result
</form>
<div style="clear:both;"></div>
<br /><br />
<br />
<br />
<div style="clear:both;"></div>
<ul id="sortable_parent" class="all-menu">
<!--Parent Menu -->
<li class="p-menu">
<div class="p-menu-title"> 123456789112345</div><!--parent menu title and drag handle -->
<ul id="sortable_child1" class="all-sub-menu">
<li class="s-menu"><div class="s-menu-title"> Sub 1</div></li>
<li class="s-menu"><div class="s-menu-title"> Sub 2</div></li>
<li class="s-menu"><div class="s-menu-title"> Sub 3</div></li>
<li class="s-menu"><div class="s-menu-title"> Sub 4</div></li>
<li ></li> <!--Empty So things can be dropped -->
</ul>
</li>
<!--Parent Menu -->
<li class="p-menu">
<div class="p-menu-title"> MENU 2</div><!--parent menu title and drag handle -->
<ul id="sortable_child2" class="all-sub-menu">
<li class="s-menu"><div class="s-menu-title"> Sub 11</div></li>
<li ></li> <!--Empty So things can be dropped -->
</ul>
</li>
<!--Parent Menu -->
<li class="p-menu">
<div class="p-menu-title"> MENU 3</div><!--parent menu title and drag handle -->
<ul id="sortable_child3" class="all-sub-menu">
<li class="s-menu"><div class="s-menu-title"> Sub 21</div></li>
<li class="s-menu"><div class="s-menu-title"> Sub 22</div></li>
<li class="s-menu"><div class="s-menu-title"> Sub 23</div></li>
<li class="s-menu"><div class="s-menu-title"> Sub 24</div></li>
<li ></li> <!--Empty So things can be dropped -->
</ul>
</li>
<!--Parent Menu -->
<li class="p-menu">
<div class="p-menu-title"> MENU 4</div><!--parent menu title and drag handle -->
<ul id="sortable_child4" class="all-sub-menu">
<li class="s-menu"><div class="s-menu-title"> Sub 31</div></li>
<li class="s-menu"><div class="s-menu-title"> Sub 32</div></li>
<li class="s-menu"><div class="s-menu-title"> Sub 33</div></li>
<li class="s-menu"><div class="s-menu-title"> Sub 34</div></li>
<li class="s-menu"><div class="s-menu-title"> Sub 35</div></li>
<li ></li> <!--Empty So things can be dropped -->
</ul>
</li>
</ul>
<div style="clear:both;"></div>
<script type="text/javascript">
$(function() {
// Make parent top menus sortable..
$('#sortable_parent').sortable({ handle: '.p-menu-title', cursor: 'hand', placeholder: 'ui-state-highlight-top' });
// $("#sortable_parent").disableSelection();
});
</script>
<script type="text/javascript">
//Try to connect all sub menus so user can sort them or drag them to a different top menu..
$(function() {
$(".all-sub-menu").sortable({
connectWith: '.all-sub-menu', placeholder: 'ui-state-highlight', dropOnEmpty: false
}).disableSelection();
});
</script>
</body>
</html>