jquerycsskendo-menu
kendoMenu how to center menu if menu width is not known beforehand
I have the following menu structure (Edited from original post):
<html class="k-webkit k-webkit40">
<head>
<title>Site Title</title>
<!-- js and css files referenced here -->
</head>
<body>
<link href="/PhalconEnhancedWebpages/public/ui/kendo/styles/kendo.common.min.css" type="text/css" rel="stylesheet">
<link href="/PhalconEnhancedWebpages/public/ui/kendo/styles/kendo.black.min.css" type="text/css" rel="stylesheet">
<script src="/PhalconEnhancedWebpages/public/ui/kendo/js/jquery.min.js" type="text/javascript"></script>
<script src="/PhalconEnhancedWebpages/public/ui/kendo/js/kendo.all.min.js" type="text/javascript"></script>
<div id="divAll" class="AllContent">
<div id="divHeaderAll">
<div id="divHeaderContentAll" style="position:relative;width:100%;height:140px;background-color:#555555;">
<div id="divHeaderTop" style="position:absolute;left:0px;right:0px;top:0px;height:20px;background-color:#666666;text-align:center;">
This is the greeting bar
</div>
<div id="divHeaderMiddle" style="position:absolute;left:0px;right:0px;top:20px;height:100px;background-color:#777777;">
<div id="divCompanyLogo" style="position:absolute;left:0px;top:0px;width:180px;height:100px;">
Company<br/>Logo<br/>
</div>
<div id="divMenuHolder" style="position:absolute;left:180px;right:180px;top:0px;height:100px;text-align:middle;vertical-align:bottom;">
<div id="divMenuContentHolder">
<div id="menuContainer">
<ul id="menuUL" data-role="menu" class="k-widget k-reset k-header k-menu k-menu-horizontal" tabindex="0" role="menubar">
<li class="k-item k-state-default k-first" role="menuitem">
<a href="/PhalconEnhancedWebpages/home/home" class="k-link">Home</a>
</li>
<li class="k-item k-state-default" role="menuitem">
<a href="/PhalconEnhancedWebpages/map/map" class="k-link">Map</a>
</li>
<li class="k-item k-state-default" role="menuitem">
<span class="k-link">
Advanced
<span class="k-icon k-i-arrow-s"></span>
</span>
<ul class="k-group" role="menu" aria-hidden="true">
<li class="k-item k-state-default k-first" role="menuitem">
<span class="k-link">
Information
<span class="k-icon k-i-arrow-e"></span>
</span>
<ul class="k-group" role="menu" aria-hidden="true">
<li class="k-item k-state-default k-first" role="menuitem">
<a href="javascript:void(0)" onclick="redirectToRootSite('http://localhost:9191/src/html/Basic.html?folder=information&page=device');" class="k-link">
Individual Devices
</a>
</li>
<li class="k-item k-state-default" role="menuitem">
<a href="javascript:void(0)" onclick="redirectToRootSite('http://localhost:9191/src/html/Basic.html?folder=information&page=listen');" class="k-link"> Receive Site Assignments
</a>
</ul>
......... REST OF MENU OMITTED FOR BREVITY
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div id="divCustomerLogo" style="position:absolute;right:0px;width:180px;height:100px;">
Customer<br/>Logo<br/>
</div>
</div>
<div id="divHeaderBottom" style="position:absolute;left:0px;right:0px;bottom:0px;height:20px;background-color:#ff2211;text-align:center;">
This is the Alerts Bar
</div>
</div>
</div>
<div id="divContentAll">
<div id="divMainContent" style="width:100%;display:table;">
... THE REST IS NON HEADER/MENU RELATED CONTENT AND IS OMITTED FOR BREVITY
</div>
</div>
</body>
</html>
Here is the javascript governing the "menuUL" element:
$(document).ready(function(){
$("#menuUL").kendoMenu();
// This is using the "black" theme, so the look and feel of the menu is derived from there.
});
And here are the css governing the "menuUL" element parents (some items are commented out throughout since I was playing with different permutations):
/*User Agent Stylesheet (using google chrome in this case)*/
div{
display:block;
}
.AllContent {
font-family: Arial;
color: white;
}
#divHeaderAll {
width: 100%;
height: 140px;
background-color: #dddddd;
position: absolute;
top: 0px;
left: 0px;
}
#divMenuContentHolder {
margin: 0 auto;
/* position: relative; */
top: 14px;
min-width: 800px;
background-color: #3D3D3D;
}
#menuContainer {
margin: 10px auto;
padding-top: 0px;
width: 800px;
}
UL related styles are controlled by the usage of the "kendoMenu" function (kendo.all.min.js -- Kendo UI Complete v2013.3.1324 free version) and the "black" theme (kendo.black.min.css)
This results in a menu area stretching from left to right of "divMenuContentHolder", even though the actual menu items only take up a fraction of that width as shown in the graphic below:
What needs to be done so that the menu area only takes up the width of its items and its centered within menuConainer and divMenuContentHolder as shown in the image below?
Any suggestions?
EDIT: There is also a parent named "divMenuHolder" that has some inline styles set upon it. I have edited my code below to reflect that.
EDIT2: Added all the pertinent HTML and CSS.
Solution
The reasons why your menu dint work were,
The width of the menu was set as 800px in the CSS. So that must be removed.
The default display property of is block. Hence it will always take 100% width. So #menuUL must be set to "inline-block" so that it only takes the width of existing content.
The parent pf #menuUL must be center aligned using "text-align:center" so that the menu is in the middle.
$(document).ready(function(){
$("#menu").kendoMenu();
// This is using the "black" theme, so the look and feel of the menu is derived from there.
});#menu-wrapper {
text-align: center;
}
#menu {
display: inline-block;
text-align: left;
}<html class="k-webkit k-webkit40">
<head>
<title>Site Title</title>
<link href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" type="text/css" rel="stylesheet">
<link href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.black.min.css" type="text/css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js" type="text/javascript"></script>
</head>
<body>
<div id="menu-wrapper">
<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>Children's 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>
<li>Carpets</li>
</ul>
</li>
<li>
Storage
<ul>
<!-- moving the UL to the next line will cause an IE7 problem -->
<li>Wall Shelving</li>
<li>Kids Storage</li>
<li>Baskets</li>
<li>Multimedia Storage</li>
<li>Floor Shelving</li>
<li>Toilet Roll Holders</li>
<li>Storage Jars</li>
<li>Drawers</li>
<li>Boxes</li>
</ul>
</li>
<li>
Lights
<ul>
<!-- moving the UL to the next line will cause an IE7 problem -->
<li>Ceiling</li>
<li>Table</li>
<li>Floor</li>
<li>Shades</li>
<li>Wall Lights</li>
<li>Spotlights</li>
<li>Push Light</li>
<li>String Lights</li>
</ul>
</li>
</ul>
</li>
<li>
Stores
<ul>
<li>
<div id="template" style="padding: 10px;">
<h2>Around the Globe</h2>
<ol>
<li>United States</li>
<li>Europe</li>
<li>Canada</li>
<li>Australia</li>
</ol>
<img src="../content/web/menu/map.png" alt="Stores Around the Globe" />
<button class="k-button">See full list</button>
</div>
</li>
</ul>
</li>
<li>
Blog
</li>
<li>
Company
</li>
<li>
Events
</li>
</ul>
</div>
</body>
</html>