Menu icon Foundation
Alignment of dropdown box

Hi All, I am using foundation JQuery framework, where I have to show the dropdown box, as align from right to left.
as the given image, but it comes as left to right. After so many try I am not able to do this. can any one suggest me what am I doing wrong. Is there it automatically decides the position depends on the row-colums? or something else. I have added image what I need. please suggest right way to do this. Thanks in advance.
The below image what I need with drop down box,

12

The below image I designed

123

jquerydropdown boxdoundation

Hi All, I am using foundation JQuery framework, where I have to show the dropdown box, as align from right to left.
as the given image, but it comes as left to right. After so many try I am not able to do this. can any one suggest me what am I doing wrong. Is there it automatically decides the position depends on the row-colums? or something else. I have added image what I need. please suggest right way to do this. Thanks in advance.
The below image what I need with drop down box,

12

The below image I designed

123
Rafi Benkual almost 5 years ago

You mentioned you are using jQuery Foundation which is confusing. I think you mean you mean you are using a Foundation dropdown. The dropdown positions itself according to how mush space it has in relation to the viewport and the button location. You can make a dropdown contained in rows and columns if you want.

Check it out: http://codepen.io/rafibomb/pen/xbrzaa

Ricardo over 3 years ago

How would we get this fixed on Foundation 6.2.0? I am not being lucky to get it sorted

 

Code:

<ul class="top-menu border-bottom f-12">
								<li><a href="#" class="dark-gold" data-toggle="drop-top-1">BRIDAL</a></li>
								<li><a href="/visit.html" class="dark-gold">VISIT</a></li>
								<li><a href="/contact.html" class="dark-gold">CONTACT</a></li>
								<li><a href="#" class="dark-gold" data-toggle="drop-top-2">ABOUT US</a></li>
								<li><a href="#" class="dark-gold">FAVORITES</a></li>
								<li><a href="#" class="dark-gold" data-toggle="drop-top-3">MY ACCOUNT <i class="fa fa-user"></i></a></li>
						</ul>
						<div class="row">
								<div class="large-4 columns">
										<div class="dropdown-pane border-all f-12" id="drop-top-1" data-dropdown-width="100px" data-dropdown data-hover="true" data-hover-pane="true" data-v-offset="14">
												<ul class="vertical menu">
														<li><a href="/wedding-gifts" class=" ">WEDDING GIFTS</a></li>
														<li><a href="/request_registry.html" class=" ">FIND A REGISTRY</a></li>
														<li><a href="/make_an_appointment.html" class=" ">MAKE AN APPOINTMENT</a></li>
														<li><a href="/upcoming-bridal-shows/Bradshaws_Gift_Registry_Services" class=" ">BRIDAL EVENTS</a></li>
														
														</ul>
														
														<div class="row small-up-1 medium-up-2 large-up-4">
								
										<div class="columns">
												<div class="callout"><img src="images/gordon_maze_16pcset_blue_new_150px.jpg" alt=""/></div>
										</div>
					
								</div>
														
										</div>
										<div class="dropdown-pane border-all f-12" id="drop-top-2" data-dropdown-width="100px" data-dropdown data-hover="true" data-hover-pane="true" data-v-offset="14">
												<ul class="vertical menu">
														<li><a href="/history.html" class=" ">HISTORY</a></li>
														<li><a href="/press.html" class=" ">PRESS</a></li
														</ul>
										</div>
										<div class="dropdown-pane bottom border-all f-12" id="drop-top-3" data-dropdown-width="100px" data-position-class="bottom" data-dropdown data-hover="true" data-hover-pane="true" data-v-offset="14">
												<ul class="vertical menu">
														
				<li><a href="/user-system/order-history.htm">Orders</a></li>
				<li><a href="/user-system/wish-list.htm">Wish List</a></li>
				<li><a href="/returns">Returns</a></li>
				<li><a href="/user-system/account-settings.htm">Account Settings</a></li>
				<li>{module_logout}</li>
			
														</ul>
										</div>
								</div>
						</div>