0.00 (0 votes)
How to manage circle menu with icons in JM Car Dealer?

In JM Car Dealer - multipurpose products directory template you will find the new menu design - circle menu with icons and short title in tooltip.

 

In this menu you can display 8 separate links with icon image and tooltips.
I would like to guide you how to manage the round menu in your Joomla! installation with JM Car Dealer template.

At first you need to create a menu.
The demo site of this template includes the menu called Company and contains 4 parent items: Categories, Test Drive, Contact and Circle.

 

JM Car Dealer - multipurpose products directory

 

This module has also menu suffix dropdown-ms (for design purpose) but what interests us is the round menu which is a part of those menu. The Circle item icludes 8 child items displayed in the circle menu view. 1 - 8 numbers apply to 8 icons placed inside the circle.

circle items

But how to display those child links as a circle?

You need to use special class in Circle menu item.

STEP 1: Create New menu item.

STEP 2: Open menu item options => Link Type tab.

 

menu item options

  1. Link CSS style - enter the class name circle-menu-ms - the template includes css styles for this class so it's important to add this class name for parent menu item.
  2. Link image - Icon image, on our demo this is question mark.

STEP 3: Next you need to prepare submenu items.

On our demo site all submenu items type is Menu Item Alias but you can use also the other menu item types.

Same as above add New menu item. Remember to set proper parent item (on our demo it's 'Circle').

circle-parent

Go to child item options => Link Type tab.

 

circle-child

  1. Menu item name - it's not important, because we do not display this name.
  2. Link Title Attribute - this attribute is displayed as tooltip title.
  3. Link CSS Style - you need to add hasTip class for tooltip purpose (if you do not want use tooltip leave this field blank).
  4. Link image - item image (recommend square image, because these images are rounded with CSS style).
  5. Add Menu Title - set No, because we do not want display menu item name (from 1. point).

Then you can create 7 more items with different Title attribute, type and icon images. Remember in this menu you need to have exactly 8 submenu items.

That's all :)

 

Template detailsLive demo  

About the author

Artur Kaczmarek
WordPress and Joomla lover. Artur Kaczmarek works as a programmer and coder at Joomla-Monster.com and PixelEmu.com. Senior products quality reviewer. Recent passed level - specialist at accessible templates (WCAG/Section508). Artur graduated IT and econometrics. He is a passionate about new technologies and in particular everything related to programming and coding for content management systems.

Users' reviews

Total rating: (0 votes) Log-in to add review

INDICO S.C.

ul. Wałowa 10/3, 84-200 Wejherowo, registered in Centralna Ewidencja i Informacja o Działalnosci Gospodarczej
NIP/VATID: PL5882424318

Copyright © 2009-2018 Joomla-Monster.com All rights reserved.

Joomla-Monster.com and this site is not affiliated with or endorsed by The Joomla! Project™. Any products and services provided through this site are not supported or warrantied by The Joomla! Project or Open Source Matters, Inc. Use of the Joomla!® name, symbol, logo and related trademarks is permitted under a limited license granted by Open Source Matters, Inc.

Buy with the discount today!

-7% on ALL with the code: UTJFD 

copy the code and use today!