Web Development

CREATE RESPONSIVE SIDE MENU IN DRUPAL

0  0 2015-02-16 08:24:39

Learn to create responsive side menu with E-bazar theme. Creation of default Menu in Drupal:

1)Install Drupal theme first.

2)After admin login ,on Admin page go to Structure->Menus->Add menu->create menu

Fill the description. Create menu.

3)Go to add link, add sub menus to it.

4)Give name->path(where you want to redirect after on click)->Description (if want)->check “show as expanded” if you want to give sub sub-menus to it.->select parent to whom you want to provide this sub-menu.

5)Provide weights according to their priority (-) means high, (+) means low.

6)Save configurations.

7)Once you create menus, go to structure->block->find your menu into disable blocks, set that menu on whichever position you want.

For simple side menu set it on  primary or sidebar.(as per theme layout).

[[{"type":"media","view_mode":"media_large","fid":"1197","attributes":{"class":"media-image aligncenter size-full wp-image-16329","typeof":"foaf:Image","style":"","width":"1366","height":"768","alt":"Ziuby-Drupal-Side-Menu 1"}}]]

[[{"type":"media","view_mode":"media_large","fid":"1198","attributes":{"class":"media-image aligncenter size-full wp-image-16331","typeof":"foaf:Image","style":"","width":"1366","height":"768","alt":"Ziuby-Drupal-Side-Menu 2"}}]]

Drupal Super -fish module integration with existing menu:

1)Download SUPERFISH API from drupal project site.

[[{"type":"media","view_mode":"media_large","fid":"1199","attributes":{"class":"media-image aligncenter size-full wp-image-16330","typeof":"foaf:Image","style":"","width":"1366","height":"768","alt":"Ziuby-Drupal-Side-Menu 3"}}]]

https://www.drupal.org/project/superfish

2)Download tar file:

[[{"type":"media","view_mode":"media_large","fid":"1200","attributes":{"class":"media-image aligncenter size-full wp-image-16332","typeof":"foaf:Image","style":"","width":"1366","height":"768","alt":"Ziuby-Drupal-Side-Menu 4"}}]]

3)For installing superfish module we require to install two more modules like. Superfishlibraries, and Libraries Module. 4)https://github.com/mehrpadin/Superfish-for-Drupal.

For superfish libraries. Click and download (download zip) option.

[[{"type":"media","view_mode":"media_large","fid":"1201","attributes":{"class":"media-image aligncenter size-full wp-image-16333","typeof":"foaf:Image","style":"","width":"1366","height":"768","alt":"Ziuby-Drupal-Side-Menu 5"}}]]

https://www.drupal.org/project/libraries for Libraries Module

[[{"type":"media","view_mode":"media_large","fid":"1202","attributes":{"class":"media-image aligncenter size-full wp-image-16334","typeof":"foaf:Image","style":"","width":"1366","height":"768","alt":"Ziuby-Drupal-Side-Menu 6"}}]]

Copy the superfish libraries into Drupal folder such as:

Sites->all->libraries->paste here and rename as “superfish” ‘s’ should be in small case.

Check this folder has superfish .js file along with other js files.

Installing Superfish into Drupal:

5)In Admin bar. Go to ->Module -> Install New module->In browse  Give path to tar file of superfish as well as libraries module seprately (if libraries are exists   already will get message as “Already Installed” ) ->install-> Enable new Module.

[[{"type":"media","view_mode":"media_large","fid":"1203","attributes":{"class":"media-image aligncenter size-full wp-image-16335","typeof":"foaf:Image","style":"","width":"1366","height":"768","alt":"Ziuby-Drupal-Side-Menu 7"}}]]

[[{"type":"media","view_mode":"media_large","fid":"1204","attributes":{"class":"media-image aligncenter size-full wp-image-16336","typeof":"foaf:Image","style":"","width":"1366","height":"768","alt":"Ziuby-Drupal-Side-Menu 8"}}]][[{"type":"media","view_mode":"media_large","fid":"1205","attributes":{"class":"media-image aligncenter size-full wp-image-16337","typeof":"foaf:Image","style":"","width":"1366","height":"768","alt":"Ziuby-Drupal-Side-Menu 9"}}]]

After enableing the superfish module. Save configurations.

[[{"type":"media","view_mode":"media_large","fid":"1206","attributes":{"class":"media-image aligncenter size-full wp-image-16338","typeof":"foaf:Image","style":"","width":"1366","height":"768","alt":"Ziuby-Drupal-Side-Menu 10"}}]]

6)Click on configure .

You will get configure page open, Select As much superfish menu block you want to create  in your theme. One block for  one whole menu.

[[{"type":"media","view_mode":"media_large","fid":"1207","attributes":{"class":"media-image aligncenter size-full wp-image-16339","typeof":"foaf:Image","style":"","width":"1366","height":"768","alt":"Ziuby-Drupal-Side-Menu 11"}}]]

You will get path of all superfish libraries as default don’t change it .

If you are not getting above page, read superfish libraries installation again and do properly.

7)Now go to structure->blocks->in disable block you will get superfish block present their shown below.

[[{"type":"media","view_mode":"media_large","fid":"1208","attributes":{"class":"media-image aligncenter size-full wp-image-16340","typeof":"foaf:Image","style":"","width":"1366","height":"768","alt":"Ziuby-Drupal-Side-Menu 12"}}]]

8)Replace none with whichever position you want to give to your menu. For side menu provide primary or sidebar according theme.

9)Save block.

10)After, click on configure which is there in front of your superfish block.

You will get Configure page open.

[[{"type":"media","view_mode":"media_large","fid":"1209","attributes":{"class":"media-image aligncenter size-full wp-image-16341","typeof":"foaf:Image","style":"","width":"1366","height":"768","alt":"Ziuby-Drupal-Side-Menu 13"}}]][[{"type":"media","view_mode":"media_large","fid":"1210","attributes":{"class":"media-image aligncenter size-full wp-image-16342","typeof":"foaf:Image","style":"","width":"1366","height":"768","alt":"Ziuby-Drupal-Side-Menu 14"}}]]   [[{"type":"media","view_mode":"media_large","fid":"1211","attributes":{"class":"media-image aligncenter size-full wp-image-16343","typeof":"foaf:Image","style":"","width":"1366","height":"768","alt":"Ziuby-Drupal-Side-Menu 15"}}]]   [[{"type":"media","view_mode":"media_large","fid":"1212","attributes":{"class":"media-image aligncenter size-full wp-image-16344","typeof":"foaf:Image","style":"","width":"1366","height":"768","alt":"Ziuby-Drupal-Side-Menu 16"}}]]

11)Provide all required settings according to your requirement. in Menu parent field  give your menu name which was created before in default menu.

12)For more formatting refer:https://www.youtube.com/watch?v=M5H1I58q5_k

13)If this superfish menu need more formatting and customization.

You can use its css file which is in    Sites->all->libraries->superfish->css->superfish.css.

14)You can make changes according to your requirement. Be careful while editing in css.

[[{"type":"media","view_mode":"media_large","fid":"1213","attributes":{"class":"media-image aligncenter size-full wp-image-16345","typeof":"foaf:Image","style":"","width":"1366","height":"768","alt":"Ziuby-Drupal-Side-Menu 17"}}]]

15)Styles that you going to provide to your superfish also can be customize more by changing css of styles which are in sites->all-> libraries->superfish->styles->(styles css files)

[[{"type":"media","view_mode":"media_large","fid":"1214","attributes":{"class":"media-image aligncenter size-full wp-image-16346","typeof":"foaf:Image","style":"","width":"1366","height":"768","alt":"Ziuby-Drupal-Side-Menu 18"}}]]

I hope this will help users to get a good perspective on the level of customization required .

If any issues faced please feel free to write in the comment section below.

Comments (0)

Post Your Comments

Headquarter



Hong Kong Office



Find Us On

Website Development Company
SEO
Digital Marketing
website development company in Hong Kong
website designer in pune