[solved] Drop Down Menu Request - JF Calla Exteriors - Joomla Templates

Welcome, Guest

TOPIC: [solved] Drop Down Menu Request

[solved] Drop Down Menu Request 23 Aug 2017 19:52 #10529

Hello friends of JF Calla Exteriors

I'm asking for help to get a so called «drop-down» or «submenu» done with the Template JF Calla Exteriors. Yes I've googled it an I also looked at the forum. That's what I've found so far:

Link 1:
www.joomfreak.com/forum/categories/jooml...drop-down-menus.html

Not really useful at all. I can't ¦¦

edit the main menu, and set "Show Sub-menu Items

¦¦ as joomfreak suggests.

Link 2:
https://www.joomfreak.com/forum/categories/joomla-templates/jf-calla-exteriors/dropdown-menu.html

Doesn't help either.

Link 3:
https://www.joomfreak.com/forum/categories/joomla-templates/jf-calla-exteriors/dropdown-menu/page-2.html

I tried to paste the suggested code into template.css. It didn't help. The result was that the subemnu didn't appear anymore at all.

THE CURRENT STATUS IS
When I create a submenu. There actually appears a menu point but only when I clicked on the Menu point that is above in the hierarchy. It doesn't appear on hover. And it doesn't look nice.

Last Edit: 31 Aug 2017 17:07 by oPhilippeo.

Reply Quote

Posts:28
oPhilippeo
Junior Boarder
OFFLINE
Karma: 0

Re: Drop Down Menu Request 25 Aug 2017 03:11 #10534

You mean you want to th esubmenu appear on hover?

joomfreak

Reply Quote

Posts:2940
isupport
Moderator
OFFLINE
Karma: 0

Re: Drop Down Menu Request 25 Aug 2017 21:09 #10535

Yes, and I would like to style it.

Reply Quote

Posts:28
oPhilippeo
Junior Boarder
OFFLINE
Karma: 0

Re: Drop Down Menu Request 28 Aug 2017 03:10 #10536

You can edit file templates/jf_calla-exteriors/css/template.css, add:

 
#jf-mainnav ul.menu li ul.nav-child {
	padding: 5px 0;
	position: absolute;
	opacity: 0;
}
 
#jf-mainnav ul.menu li:hover ul.nav-child {
	opacity: 1;
}

joomfreak

Reply Quote

Posts:2940
isupport
Moderator
OFFLINE
Karma: 0

Re: Drop Down Menu Request 28 Aug 2017 10:22 #10537

#jf-mainnav {
	float: right;
	border-bottom: 1px solid #fff;
	position: relative;
	padding: 3px 0 0;
}
 
#jf-mainnav ul:after {
    clear: both;
    content: " ";
    display: block;
    height: 0;
    visibility: hidden;
}
 
#jf-mainnav ul.menu li {
	cursor: pointer;
	display: block;
	float: left;
	margin-right: 25px;
}
 
#jf-mainnav ul.menu li a {
	color: #fff;
	font-family: misobold;
	font-size: 18px;
	text-transform: uppercase;
}
 
/*PZ individual Submenu*/
#jf-mainnav ul.menu li ul.nav-child {
	padding: 5px 0;
	position: absolute;
	opacity: 0;
}
 
#jf-mainnav ul.menu li:hover ul.nav-child {
	opacity: 1;
}
 
#jf-mainnav .blob {
	position: absolute;
	height: 1px;
	bottom: -1px;
	z-index: 99;
}

This is my code so far.
It now appears on hover but only when I clicked already on the submenus parent. Which means it doesn't appear when I am on the «Home» site and then hover over the submenus parent.

The goal would be that it appears in this case.

Reply Quote