You are here:  » Dropdown Menu

Active Forum Topics


Dropdown Menu

Submitted by stuartqwh on Thu, 2016-03-24 10:32 in

Hi,

I'd like to create a simple dropdown menu next to Merchant A-Z within the menu bar containing links to pages I've created using example.php

Any guidance would be appreciate.

Regards,

Stuart.

Submitted by support on Thu, 2016-03-24 11:15

Hello Stuart,

Sure - here's the code for a drop-down menu with two example links.

  <li class="has-dropdown">
    <a href="#">My Menu</a>
    <ul class="dropdown">
      <li><a href="example1.php">Item 1</a></li>
      <li><a href="example2.php">Item 2</a></li>
    </ul>
  </li>

Within html/menu.php you'll find the containing <ul> at line 17:

    <ul class='left'>

Insert the code above immediately before the corresponding closing </ul> at line 39.

Alternatively, if you wanted to have a drop-down menu or items on the right of the nav bar, (like the Voucher Codes link on the demo site) then immediately after the closing </ul> of the left menu group create a new <ul> for the right section e.g.

    <ul class='right'>
       <!-- right menu <li>...</li> items here -->
    </ul>

If you wanted to embellish your links with CSS icons the template includes Foundation's Icon Fonts 3 - you can view the full icon set here;

http://zurb.com/playground/foundation-icon-fonts-3

They are included by way of the <i> tag, for example the Voucher Codes link on the demo site is created as follows:

  <li><a href='/vouchers.php'><i class='fi-ticket'></i> Voucher Codes</a>

Hope this helps!

Cheers,
David.
--
PriceTapestry.com

Submitted by stuartqwh on Thu, 2016-03-24 11:44

Spot on as always.

Thank you very much David.

Submitted by wesse249 on Fri, 2016-06-03 13:34

Hello David,

When i insert te code. the menu isn't collapse when i go with the mouse over it of click on it.

Thanks Jan Roel

Submitted by wesse249 on Fri, 2016-06-03 13:37

it only happens on the index page. Thanks

Submitted by support on Fri, 2016-06-03 13:55

Hello Jan,

I know from another topic that you are using PHP conditional blocks to show / not show content depending on whether your visitor is on the index page or not.

The drop-down menus require Foundation's JavaScript top level function to be called, which is the following code in html/footer.php

    <script>
      $(document).foundation();
    </script>

Double check that none of your conditional code has prevent the above from being invoked on your index page - make sure that the above is the last thing before the closing </body> tag in html/footer.php and that should be all it is...

Cheers,
David.
--
PriceTapestry.com

Submitted by Yohannes on Wed, 2016-11-09 01:52

This feature is what I have been looking for--Excellent David!

One little modification to make if you can:

How can I control the control the spacing between rows <Li>'? I want to narrow it a little bit. I tried this, but could not control the gap between rows:

  <li class="has-dropdown" style="">
    <a href="#">My Menu</a>
    <ul class="dropdown">
<style type="text/css">
<ul style="line-height: 80%">
</style>
      <li><a href="example1.php">Item 1</a></li>
      <li><a href="example2.php">Item 2</a></li>
    </ul>
  </li>

Many thanks.

Yohannes

Submitted by support on Wed, 2016-11-09 09:35

Hello Yohannes,

Have a go adding the following to your html/default.css

.dropdown li a {
  line-height: 80% !important;
}

...or as required.

( the end of default.css has a section commented /* foundation overrides */ )

Hope this helps!

Cheers,
David.
--
PriceTapestry.com

Submitted by Yohannes on Wed, 2016-11-09 18:22

Thank you David,

That has allowed me to play around the Dropdown Menu.

This worked perfect for me

.dropdown li a {
  line-height: 130% !important;
}

Cheers!

Yohannes