Yii 1.1: Preventing CJuiTabs from hiding drop-down CMenu items


Almost all Yii applications use CMenu at the top of each page to show options available to the user, and many include drop-down components to allow more fine-grained selection.

But when the page's content uses CJuiTabs, many find that the drop-down CMenus are hidden behind the JuiTabs content. This is very annoying, and there don't appear to be any Yii or jQuery options directly on point to fixing this.

The solution involves insuring that CMenu has a higher z-index than the main content does, and this can be achieved by adding htmlOptions to the CMenu widget in the main layout file:

// in protected/views/layouts/main.php
<div id="mainmenu">
    <?php $this->widget('zii.widgets.CMenu', array(
           // z-index=1 means CMenu appears on top of everything in the content section
           'htmlOptions' => array( 'style' => 'position: relative; z-index: 1' ),
                array('label' => 'Home',  'url' => array('/site/index')),
                array('label' => 'About', 'url' => array('/site/page', 'view' => 'about')),

Alternately (and perhaps better), this fix can be made in the site-wide CSS file by referencing the id of the div containing your CMenu:

/* in webroot/css/main.css */
#mainmenu {
    position: relative;
    z-index: 1

Both ought to achieve the same thing.

Note - changing the position to relative may have other unintended CSS/HTML effects; it's wise to test your whole site extensively after making this change.

Written for: Yii 1.1.6

Total 1 comment

#13500 report it
Maug Lee at 2013/06/01 04:17pm
incorrect definition of „z-index“
// z-index=1 means CMenu appears on top of everything in the content section

incorrect definition of „z-index“. Value of „1“ will not bring an element above others. Z is for imaginary Z axis ( where x and y are two-dimensional axies of the screen). If more than one element are positioned absolutely (position:absolute) they „jump upwards“ from page surface. And can overlap each other in order they appear in code – the last will cover others. To change this you can give z-index property for all elements required. Or set a big number for problematicaly one (e.g. z-index:99).

Leave a comment

Please to leave your comment.

Write new article