PDA

View Full Version : CSS dropdown menu behind panel



AgentSmith
28 Oct 2009, 10:46 AM
Hi,

My question is similar to a previous post (https://www.extjs.com/forum/showthread.php?t=54382 (https://www.extjs.com/forum/showthread.php?t=54382)) which I was unable to reply to. Using Ext.Viewport, I load a CSS menu in the north region. When I mouse over the menu, the menu items drop down but the items appear below the center region panel. I have been unable to get this to work. I tried setting the z-index based on information in a similar post but to no luck. Can anyone figure this out? I included the code below.

Thanks,
AS



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<!-- The DOCTYPE statement above is required for this demo to run properly in IE 7+. This will not run correctly in IE 6 as coded. -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Viewport Example</title>
<link rel="stylesheet" type="text/css" href="../../ext/resources/css/ext-all.css" />

<!-- User defined stylesheets -->
<link href="Menu.css" media="screen" rel="stylesheet" text="text/css" />

<script type="text/javascript" src="../../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext/ext-all.js"></script>

<!-- This is required to load html content from local filesystem. -->
<script type="text/javascript" src="../../ext/ux/ext-basex.js"></script>

<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '../../ext/resources/images/default/s.gif';

Ext.onReady(function(){

var viewport =
new Ext.Viewport({
layout: "border",
renderTo: 'display_location_id',
items: [{
region: "north",
xtype: 'panel',
height: 70,
autoLoad: 'CSS_Menu.html'
},{
region: 'center',
xtype: 'panel',
html: 'Center Region'
}]
});

}); // Ext.onReady()
</script>
</head>
<body>
<div id="display_location_id"></div>
</body>
</html>

CSS_Menu.html


<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Menu1</a>
<ul>
<li><a href="#">Item1</a></li>
<li><a href="#">Item2</a></li>
<li><a href="#">Item3</a></li>
<li><a href="#">Item4</a></li>
</ul>
</li>
<li><a href="#">Menu2</a>
<ul id="last-menu-item-id">
<li><a href="#">Item1</a></li>
<li><a href="#">Item2</a></li>
<li><a href="#">Item3</a></li>
<li><a href="#">Item4</a></li>
</ul>
</li>
</ul>
</div>

Menu.css


/* Applies menu background image. */
#menu{
position: relative;
z-index: 90;
zoom: 1;
background: #EDEDED url('images/menuBG.gif') repeat-x bottom left;
border: 1px solid #AEAEAE;
border-width: 1px 0;
font-family: arial,verdana;
font-size: 100%;
}

/* Removes magin and <ul> bullets. */
#menu ul, #menu ul ul{
list-style-type: none;
margin: 0;
padding: 0;
}

/* Provide some positioning of menu. */
#menu ul li{
float: left;
border-right: 1px solid #AEAEAE;
width: 12.5%;
margin-left: -1px;
width: 12.44%;
position: relative;
}

/* Additional positioning and text color of menu. */
#menu ul a{
display: block;
padding: 3px 5px;
text-align: center;
font-weight: bold;
text-decoration: none;
color: #333333;
}

/* Fixes menu background image problems in FF do to above styling. */
#menu ul:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

/* Aligns main menu and hides submenu items. */
#menu ul li ul{
margin-left: 0px;
width: 240px;
border: 1px solid #BDBCBD;
overflow: hidden;
border-top: none;
position: absolute;
left: -30000px;
background-image: url('images/subMenuBG.gif');
background-repeat: repeat-x;
background-position: left bottom;
background-color: #FFFFFF;
z-index: 100;
}

/* Not sure what this does (no visual differences from previously defined styles). */
#menu ul li ul li{
width: auto;
float: none;
clear: both;
border: none;
background: none;
}

/* Not sure what this does (no visual differences from previously defined styles). */
#menu ul li ul li a{
width: 100%;
outline: none;
text-decoration: none;
text-align: left;
padding: 3px 5px;
border-top: 1px solid #BDBCBD;


}

/* Change color when hovering over menu items. */
#menu ul li:hover a, #menu ul li.hover a, #menu ul li a:hover{
color: #800000;
font-weight: bold;
}

/* Enables menu drop down when mouse over menu item (FF only). */
#menu ul li:hover ul, #menu ul li.hover ul{
position: absolute;
left: auto;
}

/* Address alightment of last menu item to prevent display of bottom scroll bar if menu item adjacent to right side of browser display. */
#menu ul li:hover ul#last-menu-item-id, #menu ul li.hover ul#last-menu-item-id{
right: 0px;
width: 100%;
}

/* Sets the sub-menu items color. */
#menu ul li:hover ul li a, #menu ul li.hover ul li a{
background: none;
color: #333333;
}


/* Sets the sub-menu items color and background image. */
#menu ul li:hover ul li a:hover, #menu ul li.hover ul li a:hover{
background: #FFFFFF url('images/menuBG.gif') repeat-x 0 50%;
color: #800000;
}

istojanovic
26 May 2010, 3:11 PM
hi, look at
http://www.extjs.com/forum/showthread.php?84389-Viewport-amp-CSS-Menu-Problem
post #6 is the solution.

if you use multiple viewports, applie "overflow:visible;", to both ID-s