I Heart Technology Blog

by Nyberg Technology


How Customize And Style Drupals Nice Menu Module

by Darryn Nyberg

Resources > Dec 17, 2017


You can bake a drop down menu directly into a theme but we are going a different direction today. We are going to install "nice menu", a contributed module that creates blocks that are based on your menu. It has infinitely deep fly out depth. Nice.

We will install and than style this module so that it does not have the default grey theme that it comes with.

We will be getting rid of the Main Menu on my Bartik theme and using Nice Menu in the header region. This helps to balance the header area (see picture). Keep in mind that I have a sub theme of "Bartik" and that is why my site is black, but that will not affect what you are doing. In fact... i am using a sub theme of the Bartik sub theme Dartik. Crazy, I know.

STEP 1: install nice menu module

http://drupal.org/project/nice_menus

If you need more help with installing a module than you need to read a different post.

STEP 2: remove main mane from Bartik theme.

Navigate to "appearance > settings (in your bartik theme) > "uncheck the 'main menu' option" (this removes the main menu from the site).

STEP 3: setup a "nice menu" block

1. Navigate to "structure > blocks > "find the block 'Nice menu 1" > Select 'configure'". You should now be in the configuration are for that block

2. Block title: In the "block title" (this is probably empty) place the text ". This will make sure that the menu will not have a title on the display page.

3. Under "menu parent" select "main menu". This is probably already the selection but I am making sure that it is. You do this so that this "nice menu" blockv uses the same menu as "main menu". You will manage the "main menu" like you normally would. This simply provide a menu tree without baking that code into the theme.

4. Under "menu depth" select -1 for one level deep or -2 for two levels deep etc.

5. Under "menu style" select "down". We are creating a "drop down" menu so "left" and "right" would not help us.

6. Under "region" for your main theme select "header". This puts the navigation in the header of your Bartik theme. This is a great location to balance your page.

7. Under "menu name" select a title so that you remember what this block is called when you need to find it next.

8. Save the block.

 

STEP 4: applying the css

Here is The code that I have used to create the manu style in the image above. If you would like to change the colors use the code and alter the hex codes. If you need help with how to style using css this is not the post for you.


/* nice menu 1 */

#block-nice-menus-1 {
		
	}
	
#nice-menu-1 li{
		border:0px;
		border-bottom:1px solid #000000;
		background:#000000;
		padding:30px 0px 5px 0px;
		display:block;
	}
	
#nice-menu-1 li:hover{
		border:0px;
		border-bottom:2px solid #FF9911;
		background:#000000;
		padding:30px 0px 5px 0px;
		display:block;
	}
	
#nice-menu-1 li a {
		color:#ededed;
		text-decoration:none;
	}
	
#nice-menu-1 li ul{
		margin:37px 0px 0px 0px;
	}
	
#nice-menu-1 li ul li{
		border:0px;
		border-bottom:1px solid #ededed;
		background:#000000;
		padding:0px 0px 0px 0px;
		display:block;
	}
	
#nice-menu-1 li ul li:hover{
		border:0px;
		border-bottom:1px solid #000000;
		background:#292929;
		padding:0px 0px 0px 0px;
		display:block;
	}

-----------------------------------------------------

If there is anything that I am missing please let me know and I will try to update the article.
Thank you and I hope this helps.

About

The I Heart Technology Blog is written by our team members at Nyberg Technology and NyTechEd.

We hope to educate and support the community through providing resources and premium software development.

Become A Team Member

Are you a developer? Are you a tech blogger? We would love to hear from you!

(559) 335-3556

info@nybergtechnology.com
Nyberg Technology
516 Villa, #13
Clovis, CA. 93612