Public Forums 71,145 posts

[techmani Friend techmaniJoin date: June 2013Posts: 18Downloads:0Uploads:2 Thanks: 4 Thanked: 2 times in 1 posts]

#188925

Hi guys. I am trying to add an arrow on Dropdown menu like the Dropdown within a navbar in Bootstrap.

Demo: http://twitter.github.io/bootstrap/javascript.html#dropdowns

I am trying to add the same code for .t3-mainnav in template.css but it doesn’t work. Can someone help me? For example check the images…

The 1st image shows how the menu looks now and the 2nd how I want it.

---

Attachments:

1. 
2. 

[Scott Lavelle Friend Scott LavelleJoin date: November 2010Posts: 266Downloads:16Uploads:5 Thanks: 6 Thanked: 64 times in 27 posts]

#498931

For clarity’s sake: You arrow points to the left. Are you talking about this menu coming out of a side menu or a top menu? If a side menu, I’d like to know how to get it to come out from the side (instead of down within the side menu), but if from the top, I’d say that you need to pick the container level and do a background image as the top “border” of the box that has the little arrow built into it.

In the case of the bootstrap dropdown, I don’t see if anywhere in the styles. I would guess it’s in the javascript since this is specifically a “javascript in bootstrap” page, or I just can’t see this evening :).

Scott Lavelle - Technical Resource Solutions, LLC
Certified Joomla Administrator

[techmani Friend techmaniJoin date: June 2013Posts: 18Downloads:0Uploads:2 Thanks: 4 Thanked: 2 times in 1 posts]

#498937

Thanks for your reply. Actually I found it last night. I moved the main menu from the top of the page to the left, so I can have a vertical menu and not a horizontal menu. To create the arrow I changed the code in template.css:

From


.t3-mainnav .navbar .nav > li > .dropdown-menu:before {
display: none;
}
.t3-mainnav .navbar .nav > li > .dropdown-menu:after {
display: none;
}


To


.t3-mainnav .navbar .nav > li > .dropdown-menu:before {
position: absolute;
left: -16px;
top: 7px;
display: inline-block;
border-top: 8px solid transparent;
border-right: 8px solid #252525
border-bottom: 8px solid transparent;
content: '';
}
.t3-mainnav .navbar .nav > li > .dropdown-menu:after {
position: absolute;
left: -16px;
top: 7px;
display: inline-block;
border-top: 7px solid transparent;
border-right: 7px solid #252525
border-bottom: 7px solid transparent;
content: '';
}


1 user says Thank You to techmani for this useful post

1. JA Developer

[Scott Lavelle Friend Scott LavelleJoin date: November 2010Posts: 266Downloads:16Uploads:5 Thanks: 6 Thanked: 64 times in 27 posts]

#499057

I had asked some time ago in a different thread how I could make the menu come out to the right from a left column menu. By default, even in a side menu, the drop down comes down vertically rather than sliding out horizontally. From your code above, it appears that you have solved getting the little triangle, but how to you get it to come out sideways from a side menu? Or does that code also take care of that (didn’t see it by looking at the code).

Thanks for any pointers.

Scott Lavelle - Technical Resource Solutions, LLC
Certified Joomla Administrator

[techmani Friend techmaniJoin date: June 2013Posts: 18Downloads:0Uploads:2 Thanks: 4 Thanked: 2 times in 1 posts]

#499060

Actually, you have to make some changes to the code. For example, my menu has width: 110px, so I added this code:


.t3-mainnav .dropdown-menu {
margin-left: 120px;
}


The code for the dropdown menu in the pictures I posted before is:


.t3-mainnav .dropdown-menu {
box-shadow: 0 5px 10px rgba(0,0,0,0.2);
margin-left: 120px;
margin-top: -35px;
border: 4px solid #252525
border-radius: 2px;
}


Hope this one helps you! 🙂

Note: For sliding out horizontaly, I think that you have to edit javascript. I am using the “Zoom” effect, so I didn’t change any js file.

1 user says Thank You to techmani for this useful post

1. Scott Lavelle

[Scott Lavelle Friend Scott LavelleJoin date: November 2010Posts: 266Downloads:16Uploads:5 Thanks: 6 Thanked: 64 times in 27 posts]

#499109

Thanks for the info techmani – I will take a look at one of development sites and see what I can come up with from that information.

Scott Lavelle - Technical Resource Solutions, LLC
Certified Joomla Administrator

[techmani Friend techmaniJoin date: June 2013Posts: 18Downloads:0Uploads:2 Thanks: 4 Thanked: 2 times in 1 posts]

#499359

<em>@slavelle 380865 wrote:</em><blockquote>Thanks for the info techmani – I will take a look at one of development sites and see what I can come up with from that information.</blockquote>

Did it help you?

[Scott Lavelle Friend Scott LavelleJoin date: November 2010Posts: 266Downloads:16Uploads:5 Thanks: 6 Thanked: 64 times in 27 posts]

#499646

I don’t know yet. I have been trying to get some production sites done for clients and haven’t had an opportunity to go to a test site to try this and the site I WAS going to use it on decided that they didn’t want the menu item there at all, let alone with a dropdown.

I will try again on a test site and let you know what I get to. Thanks again for the info.

Scott Lavelle - Technical Resource Solutions, LLC
Certified Joomla Administrator

[Author]

Posts