This extension is a simple multilevel drop down menu widget based on the dropdown menu at
http://www.leigeber…drop-down-menu/
Extension and documentation is here:
http://www.yiiframew…extension/menu/
Demo here:
This extension is a simple multilevel drop down menu widget based on the dropdown menu at
http://www.leigeber…drop-down-menu/
Extension and documentation is here:
http://www.yiiframew…extension/menu/
Demo here:
Thanks for this extension which seems to be good.
Is there a way to disable the animation (too slow for me)?
I added an animation speed controller . It will be available in the next version with some other enhancements
A new version is available at the extensions section
Version 1.0.1
Changes:
1.Added a "delay" parameter that controls the delay of the animation. Faster animation is delay = 2. Default delay is 6.
2.The url array now is a associative one with the following keys:
route (the yii route of the link : controller/action)
link (for a fixed or external link)
params (the GET parameters to pass to the url)
htmlOptions (the html options of the menu link tag)
More documentation can be found here
Version 1.0.2
Now menus can have an icon next to the label
Great!
Quote
I always thought about that, but never searched answer.
Hello,
What am I doing wrong. After trying to get SMenu running in my own applicatiion, which does not work, I did following.
I created a new testdrive application. And replaced in main.php the standard main menu with the example of SMenu.
<div id="mainmenu">
<?php $this->widget('application.extensions.menu.SMenu',
array(
"menu"=>array(
array("url"=>array(
…
…
"stylesheet"=>"menu_blue.css",
"menuID"=>"myMenu",
"delay"=>3
)
);
?>
</div><!-- mainmenu -->
</div><!-- header -->
<div id="content">
But starting testdrive generates an error.
Undefined index: disabled
C:\Program Files\EasyPHP\www\WebRoot\testdrive\protected\extensions\menu\SMenu.php(246)
It is the same error I get in my own application. Who can give me a hint?
That's because you have your php.ini to display all notices.
If you can't disable it get the attached fixed file that handles the undefined variable errors
Thanks. This works.
Any idea why the menu gets in the background of the page contents in IE? In Firefox it works perfect, but in IE i can’t select the items in the menu because it’s behind the page contents.
Check the css of the divs where you have put the menu and the page content
If it’s possible post here the styles to check them out
ul.menu {list-style:none; margin:0; padding:0}
ul.menu * {margin:0; padding:0}
ul.menu a {display:block; color:#000; text-decoration:none}
ul.menu li {position:relative; float:left; margin-right:2px}
ul.menu ul {position:absolute; top:26px; left:0; background:#d1d1d1; display:none; opacity:0; list-style:none}
ul.menu ul li {position:relative; border:1px solid #aaa; border-top:none; width:128px; margin:0}
ul.menu ul li a {display:block; padding:3px 7px 5px; background-color:#d1d1d1}
ul.menu ul li a:hover {background-color:#c5c5c5}
ul.menu ul ul {left:148px; top:-1px}
ul.menu .menulink {border:1px solid #aaa; padding:5px 7px 7px; font-weight:bold; background:url(/app/images/header.gif); width:114px}
ul.menu .menulink:hover, ul.menu .menuhover {background:url(/app/images/header_over.gif)}
ul.menu .sub {background:#d1d1d1 url(/app/images/arrow.gif) 116px 8px no-repeat}
ul.menu .topline {border-top:1px solid #aaa}
Hey Spyros,
Before anything, thx for your contribution, works great =)
Now the problem, cant seem to change the visual of it, when i change the stylesheet option to something, say "css/navBar.css" it should load the navBar.css that is inside the webApp/css/ folder right? (webApp/protected/controllers, follows this default structure)
Btw, if i keep the default "menu_blue.css" or "menu_white.css" but change something on the files themselves, such as renaming them or making a "display:none;", the menu still renders just fine.
Where is he getting the stylesheet after all?
On page i get "assets/bedbb313/menu_white.css", but i guess this a generated css file (for caching?), so where is the original?
Assets are not really used for caching. The concept is, that data that needs to be accessable to the client (like css, javaScript, …) is published before use. This means, it is distributed with a module, but will be copied to the assets directory upon use. This ensures, that the data can be reached by the client even if your application protected folder (and thus the modules included within it) isn’t located within your web servers webroot folder.
So changing the default menu_blue.css should be okay. If you experience problems, try to delete assets/*. This forces the publishing to be done again with the next request.
You might also take a look at http://www.yiiframework.com/doc/api/CAssetManager for more details.
Hey, thanks alot =)
Yeah, deleting the files inside the Assets directory did the job, now i can access my CSS file, but each time i update it i have to manually go to the Assets directory and delete the files to trigger an update. Is there a way to, for debugging/developing, triggering the update of the Assets directory? (think of it as a cache->invalidate, if it was a caching mecanism)
Thanks
I can think of two possible solutions:
Modify the extension in a way so that it pusblishes its assets on a per file basis. For published files, yii automatically checks the time the file has been modified and will republish it if necessary. As it doesn’t work for you, I guess this component publishes on a per directory basis, where this check is omitted. This might be the more straight foreward aproach. However, let me share some additional thoughts…
Don’t modify the component css at all. Define more specific css rules within your application theme css files.
For example (imaginary one), if the component formats the content for all <p> elements as blod, but you dont want it bold but normal weight and green colored… The components css file would include a rule:
p {
font-weight: bold;
}
You leave them as they are, but you know you placed the component within a wrapper div that has the id "wrapper". So you can specify your own css rule (somewhere in application theme css):
div#wrapper p {
font-weight: normal;
color: #00FF00;
}
This rule would overwrite the existing one the component defines itself, because it is more specific.
The second aproach might be especially usefull if you seperated your applications theme css files into different units for maintenance reasons. Think of a scenario where you use a seperate colors.css that only defines rules related to foreground/ background colors and maybe background images that need to fit the current color scheme. If you want to modify the color scheme of your application one day (or create a second one and maybe give the user the choice to switch between them), it would be much easier to only have to edit this one file instead of the one big application theme file plus all the css files of all the components you have used in your application.
Great extension, I suggest it would be great to add "active" tabs like the standard Yii MainMenu.
Thanks for the great extension!
This is good if you need different CSS ‘class’ or ‘id’ for your menu items.
Modification SMenu.php to allow ‘htmlOptions’ array in menu items:
Find:
$htmlOptions["class"]=$class;
Replace:
if ($htmlOptions["class"])
$class .= " ".$htmlOptions["class"];
$htmlOptions["class"]=$class;
Note: There are two places need to be changed under function _createMenu();
This is a nice extension, that works as advertised, quickly and mostly painless.
I created [size="5"]this CSS that makes the menu bar resemble the default Yii main menu[/size].
I’ve only tried it in Safari, Firefox, Chrome and Opera, all for Mac, so I’m not sure if it will work in Internet Explorer.
Just copy and paste in the CSS directory of your Yii app, name it "menu.css" and then add in your layout:
<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->request->baseUrl; ?>/css/menu.css" />
This will override the style you may have entered when creating the widget. That’s the way I like it but you might want to do something else. Just keep in mind that this CSS uses the bg.gif that comes with the default Yii main menu and needs a proper URL if you place this CSS somewhere else.
ul.menu {
list-style:none;
margin:0;
padding:0;
position: absolute;
}
ul.menu * {
margin:0;
padding:0
}
ul.menu a {
display:block;
color: white;
text-decoration:none;
background-color: transparent;
}
ul.menu li {
position:relative;
float:left;
}
ul.menu ul {
position:absolute;
top:26px;
left:0;
background:transparent;
display:none;
opacity:0;
list-style:none
}
ul.menu ul li {
position:relative;
/* border:1px solid #aaa; */
border-top:none;
width:120px;
margin:0
}
ul.menu ul li a {
display:block;
padding:3px 7px 5px;
background-color: transparent;
}
ul.menu ul li a:hover {
height: 13px;
background: #EFF4FA;
border-top: 2px solid #8AB4D0;
color: #6399cd;
}
ul.menu ul ul {
left:120px;
top:-1px
}
ul.menu .menulink {
/* border:1px solid #aaa;*/
padding:5px 7px 7px;
font-weight:bold;
width:134px;
background: url('bg.gif') #5B98C2;
}
ul.menu .disabled {
/* border:1px solid #aaa;*/
padding:5px 7px 7px;
font-weight:bold;
width:134px;
background-color: transparent;
color: #cccccc;
}
ul.menu .disabled:hover {
background: transparent;
color: #cccccc;
}
ul.menu .menulink:hover, ul.menu .menuhover {
height: 13px;
background: #EFF4FA;
border-top: 2px solid #8AB4D0;
color: #6399cd;
}
ul.menu .sub {
height: 13px;
}
ul.menu .arrow{
top:6px;
padding-left:10px;
position:relative;
float:right
}
ul.menu .sub2 {
}
ul.menu .topline {
border-top-style: none;
border-top-width: 0;
border-top-color: black;
border-right-style: none;
border-left-style: none;
border-bottom-style: none;
border-right-width: 0;
border-left-width: 0;
border-bottom-width: 0;
}
Does this menu works with Yii 1.1.0?
It looks broken on a new webapp I made just for testing…
I copied the example code from the extensions’ documentation =/