How To Create A Drupal 6.x Horizontal SuckerFish Menu From A Taxonomy Tutorial Video
I was faced with developing a website which, was going to have a lot of taxonomy terms. This the first time that I have developed a site based so heavily on a taxonomy structure.
See the bottom of this post for a link to my article on a simpler method without the need to code anything.
System
Xampp -- for my localhost environment for testing.
Netbeans -- my php editor of choice. Check out more about this OPEN SOURCE IDE in my article NetBeans: The Free Integrated Development Environment By Sun Microsysytems.
Firefox and Internet Explorer 8
Drupal 6.15 with the clean theme installed. The module that I use is Taxonomy Menu for assigning taxonomies to a menu item.
If you are using a large taxonomy with multiple levels I would also suggest you look at Hierarchical Select which creates dynamic elements for your taxonomy so you are not left with a super long selection list its also a nice element to have for user interaction with the taxonomies.
A
--A1
--A2
------A2A1
B
C
Now for creating the Drupal 6.x Horizontal SuckerFish Menu From A Taxonomy.
First create a Menu item in your drupal installation. http://YOURSITE/admin/build/menu/add
In the video the menu item that I create is called suker-menu. Next if you need you will have to create a new region in the drupal 6 theme.This step is not necessary if you are using a different theme which has a region where you want the menu to appear. To create the region open the page.tpl.php page and add the following code where you want the new region.
<?php if ($nicemenu): ?>
<div id=”nicemenu”><ul id=”nav”>
<?php print $nicemenu ?></ul>
</div>
<?php endif; ?>The only difference that we have here as compared to a normal region is the <ul id="nav"> .......</ul> tags. These are needed to allow this to work in browsers before IE7 its not needed in firefox but as we want it to be more browser complaint we will add them.
Next we add the region to the clear.info file.
stylesheets[all][] = css/color.css
scripts[] = js/clean.js
script[] = js/sucker.js
regions[nicemenu] = Nice menu
regions[left] = Left sidebar
regions[right] = Right sidebar
regions[content] = Content
regions[header] = Header
regions[footer] = Footer
While here also add the script[] = js/sucker.js make sure you use the path to your javascript files. Open notepad or using netbeans open a javascript file and save the following code into it then save it as sucker.js where you place your javascript files. In the clean theme they go in the js folder.
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);this code is from HTML DOGS Son of Suckerfish Page which is a great resource for SuckerFish information.
Now we need to assign a taxonomy to the Sucker Menu we created earlier. Open you drupal installation and go to http://YOURSITE/admin/settings/performance and clear the cache , there is a button near the bottom of the page. This will allow us to see the new region we created.
We can now add the Sucker Menu Block to the new region. http://YOURSITE/outoften/admin/build/block. Drag the Sucker Menu Block into position and save it. There will still be no menu showing at this stage.
Next we will assign the taxonomy to the Sucker Menu Block. Navigate to http://YOURSITE/outoften/admin/content/taxonomy and choose the vocabulary you want to use for this menu and open the vocabulary to edit its settings. Scroll down to the TAXONOMY MENU settings and use the drop box to select your Menu. In this case the Sucker Menu. Make sure the following boxes have check marks next to them. Options : Synchronise changes to this vocabulary and Auto expand menu items. This will make the menu update when you add new terms to your taxonomy and the second one make sure you can see the drop down part. If you don't select Auto expand menu items you will only see top level items in you menu. Now save. The menu will look very strange and un-SuckerFishy at this point its just a simple menu.
Lastly we need to style out menu in the .css file. In clean its in the CSS folder and called topography.css in a lot of other themes its just called style.css.
add the following css code.
#nav, #nav ul {
line-height:1;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
}
#nav a {
display:block;
width:8em;
}
#nav li {
float:left;
width:8em;
}
#nav li ul {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:orange none repeat scroll 0 0;
left:-999em;
position:absolute;
width:8em;<strong>
<span style="color: #ff6600;">z-index:500;</span></strong>
}
#nav li ul ul {
margin:-1em 0 0 8em;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left:-999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left:auto;
}the z-index:500; should keep the menu above other <div> elements on the page.
Refresh you drupal page and voila you should now have a Drupal 6.x Horizontal SuckerFish Menu From A Taxonomy on your site.
For a simpler no code way read this Horizontal Suckerfish Taxonomy Menu The Easy Way Without Coding。
Good Luck and happy Drupaling
- Add new comment
- 1803 reads
Comments
5 comments posted[...] here to see the original: How To Create A Drupal 6.x Horizontal SuckerFish Menu From A … Share and [...]
Dude, Been searching and trying to figure out a good horizontal - while learning.
I did everything above and got to the regular listed nav but after adding the css it didn't change.
Any thoughts?
Thanks
Tim
Is there anyway to remove the title for the menu?
Are you using the same theme? or a custom theme? This should work. Did you flush the cache? Another method is to use the NICE MENU Module you can get from drupal.org
Yes use the tag if you are using the nice menu module. log into the block configuration settings and where it says title type in then save it.