Member Avatar for kimmi_baby

Hi,
I'm creating a Joomla website for a client and it's a vertical menu and one of the links expands when clicked on. I know it's a Joomla default and it worked fine until I started to change the button images. It worked when it was text but now it doesn't work. Is there a way to do this with what I have created already??

What I have created
I have uploaded a transparent gif to the Joomla menu and assigned it to each menu item.
I have created the CSS and assigned a different image to each item number for both normal and rollover.

What My Problem Is
When the button is clicked on (it loads the page), then the button must be clicked on again to expand the menu. The drop down menu items then overlap the menu items below. It doesn't push out the menu items below.

Is there a way to make the expandable button unlinked so that when it's clicked, it doesn't load the page and then have to click the link again to expand the menu??

This is the CSS code:

#nav {
float:left;
width:300px;
height:600px;
display:block;
	
	
}

#nav ul {
	list-style: none;
	
	
}




#nav li.item1 a {
  width: 222px;
  height:70px;
  background:url(../images/about.png) no-repeat;
 
  
}


#nav li.item2 a {
  width: 220px;
  height:96px;
  background:url(../images/projects.png) no-repeat;
}

#nav li.item3 a {
  width: 243px;
  height:70px;
  background:url(../images/macfloors.png) 0 0 no-repeat;
}

#nav li.item4 a {
  width: 220px;
  height:70px;
  background:url(../images/kyronn.png) 0 0 no-repeat;
}

#nav li.item5 a {
  width: 200px;
  height:70px;
  background:url(../images/BMP.png) 0 0 no-repeat;
}

#nav li.item6 a {
  width: 243px;
  height:70px;
  background:url(../images/marketing.png) 0 0 no-repeat;
}

#nav li.item7 a {
  width: 258px;
  height:52px;
 
}


#nav li.item1 a:hover {
  width: 222px;
  height:70px;
  background:url(../images/about.png) no-repeat;
  background-position: 0px -85px;
 
  
}

#nav li.item2 a:hover {
width:222px;
height:100px;
background:url(../images/projects.png) 0 0 no-repeat;
background-position: 0px -103px;
}

#nav li.item3 a:hover {
  background:url(../images/macfloors.png) 0 0 no-repeat;
  width:243px;
  height:70px;
  background-position: 0px -85px;
}

#nav li.item4 a:hover {
  background:url(../images/kyronn.png) 0 0 no-repeat;
  width:220px;
  height:70px;
  background-position: 0px -105px;
}


#nav li.item5 a:hover {
  background:url(../images/BMP.png) 0 0 no-repeat;
  width:200px;
  height:70px;
  background-position: 0px -90px;
}
#nav li.item6 a:hover {
  background:url(../images/marketing.png) 0 0 no-repeat;
  width:243px;
  height:70px;
  background-position: 0px -105px;
}

#nav li.item7 a:hover {
  background:url(../images/nav_contact_roll_active.png) 0 0 no-repeat;
}


#nav li a {
	display: block;
	padding: 5px 5px;
	padding-bottom:5px;
	text-decoration:none; 
	height:30px;
	color:black;
	
	
}
	
	#nav li ul {
	display: none; 
	width: 390px; 
	color:black;
	
	
}
	
	#nav li:hover ul {
	display: block;
	position: absolute;
	margin: 0;
	padding: 0;
	color:black;
	
	
}
	
#nav li:hover li {
	float: none;

}

#nav li a:hover {
	color:black;
	
	
}

This is the website

  • 3 Contributors
  • 3 Replies
  • 230 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by twiss

Dani AI

Generated

The submenu is getting pulled out of the document flow (that’s why it overlaps the items below) and the parent item is still a regular link (so the first click navigates). That’s exactly what and were pointing at — the template is forcing the submenu to be absolutely positioned, and the simplest fix is to stop it being removed from flow so child items push the list below down.

If you can edit the template.css, remove or override the rule that sets the submenu to absolute (the line mentioned). If you cannot change that file directly, add a small rule in your custom stylesheet after the template file to restore normal flow for the submenu — the effect will be that the expanded items push other menu items down instead of overlapping them.

For the “parent shouldn’t navigate” part: the cleanest, CMS-side solution in Joomla is to make the parent menu item a non-clickable label. Edit the parent item in Menus → [your menu] and change the Menu Item Type to a separator/text-heading (name varies by Joomla version). That way the parent won’t try to load a page and you get a single-click expand behavior without extra JS.

If you prefer a JS toggle (useful for touch devices or if you want click-to-open behavior while keeping a real URL), intercept clicks on parents and prevent navigation, then toggle the child list. Example jQuery you can drop into your template:

jQuery(function($){
  $('#nav li:has(ul) > a').on('click', function(e){
    e.preventDefault();
    $(this).siblings('ul').stop(true,true).slideToggle(180);
  });
});

Finally, test on touch devices and keyboard navigation. If you use JS toggles, update aria-expanded or role attributes so screen readers and keyboard users get the correct state.

Recommended Answers

All 3 Replies

Member Avatar for twiss

Remove line 172 of template.css ( position: absolute; ).

Member Avatar for matricol

use position:static

Member Avatar for twiss

Yes, but as that's the default, you can just remove it.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.