MENU

by tomwilliams

HTML

<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.blueopal.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css">
<div class="rowMenu LiveStatus" >
    <div class="col_3" style="vertical-align:top">
        
    <h2>You know need to.....</h2>
    <p class="mobile-hide">Select the group of vehicles you want to progress by clicking on the relevant column.  You can then select individual vehicles to progress to the next status.</p>
   <p class="mobile-only">Click on a graph column to see the vehicle data</p>
    </div>
     <div  class="col_8 InputGroup omega">

     <div class="k-content" style="margin: 3px 3px 3px 3px">
     <p class="PleaseWait">We are currently retrieving your personalised view. </p>
            <div id="chart"></div>
     </div>
     <div id="siteNavigation" style="display:block">
            <ul id="menu" >
                <li>
                    Products
                    <ul>
                        <li>
                            Furniture
                            <ul> <!-- moving the UL to the next line will cause an IE7 problem -->
                                <li>Tables & Chairs</li>
                                <li>Sofas</li>
                                <li>Occasional Furniture</li>
                                <li>Childerns Furniture</li>
                                <li>Beds</li>
                            </ul>


                        </li>
                        <li>
                            Decor
                            <ul> <!-- moving the UL to the next line will cause an IE7 problem -->
                                <li>Bed Linen</li>
                                <li>Throws</li>
                                <li>Curtains & Blinds</li>
                                <li>Rugs</li>
                               ...

CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {border-collapse: collapse;border-spacing: 0;}










/* TYPE PRESETS
///////////////////////////////////////////// */
/*
_______________________________
Columnal - TYPE (basic settings to make type look nice) */

body {	
	font-family: Helvetica, Arial, sans-serif;
	font-size: 100%;
	color: #444;
	
	line-height: 1.6em; /* from cssgrid.net */
	-webkit-text-size-adjust: none;		/* from cssgrid.net */ /* Stops the iPhone scalling type up - from cssgrid.net */
	}

/* h1, h2, h3, h4, h5, h6 { letter-spacing: 1px; } */

h1, h2, h3, h4, h5, h6, p, dl, hr, ol, ul, pre, table, address, fieldset {margin-bottom: 1.6em;}

/* Add back in basic text markup (after removal by reset) */
strong { font-weight: bold; }
em { font-style:italic; }
pre { font-family: "Courier New", Courier, monospace; font-size: 13px; font-weight:bold; }

/* text colors, add custom colors here to match your site */
.teal { color: #155f62; }

/* link colors */
a { color: #003F59; text-decoration:none; }
a:visited { color:#003F59; text-decoration:none; }
a:hover { color:#eb6721;...

JavaScript

$(document).ready(function() {
    $("#menu").kendoMenu();
});