|
Dropdown Menu
|
|
Topic Started: Jun 2 2014, 09:34 AM (370 Views)
|
|
Auroris
|
Jun 2 2014, 09:34 AM
Post #1
|
- Posts:
- 71
- Group:
- Members
- Member
- #610,864
- Joined:
- August 29, 2013
- I'm Browsing With
- Chrome
- My Board URL
- www.TheDDDC.net
|
On one of my forums has a customised sub-menu, so I directly control all the links on there. We have a bit of a partners scheme going on and I wanted to put all those links into a dropdown menu.
I suffer from being terrible at languages, human or computer, so I have no idea how to begin to get this to do what I want. I know just about enough to be able to put the links onto a new line and deepen the bar that they sit in.
One of my members provided me with the code they use on their (non-Zeta system) website, but they are unfamiliar with this system. I'm posting the code he provided below, in the hope that someone can help us to work out what needs changing, and which sections each part goes in.
- Code:
-
<a id="dropdown-link-partners" href="/partners/">Partners</a>
- Code:
-
<div id="dropdown-menu-partners" class="dropdown dropdown-partners dropdown-tip dropdown-anchor-right"> <ul class="dropdown-menu"> <li><a href="http://www.tswdb.com">TSWDB</a></li> <li><a href="http://bluesuninitiative.enjin.com/">BSI</a></li> <li><a href="http://thedddc.net/">The DDDC</a></li> </ul> </div>
- Code:
-
.dropdown { position: absolute;z-index: 9999999;display:none; } #dropdown-link-partners:hover + dropdown-menu-partners, dropdown-menu-partners:hover { display:block; } .dropdown .dropdown-menu, .dropdown .dropdown-panel {min-width: 150px;max-width: 360px;list-style: none;background: #171717;border: solid 1px #313131;border-radius: 6px;box-shadow: 0 0 12px #010101;overflow: visible;padding: 4px 0;margin: 0; } .dropdown .dropdown-panel { padding: 10px; } .dropdown.dropdown-tip { margin-top: 8px; } .dropdown.dropdown-tip:before { position: absolute;top: -6px;left: 9px;content: '';border-left: 7px solid transparent;border-right: 7px solid transparent;border-bottom: 7px solid #CCC;border-bottom-color: rgba(0, 0, 0, 0.2);display: inline-block; } .dropdown.dropdown-tip.dropdown-anchor-right:before { left: auto;right: 9px; } .dropdown.dropdown-tip.dropdown-anchor-center:before { left: auto;right: 50%; } .dropdown.dropdown-tip:after { position: absolute;top: -5px;left: 10px;content: '';border-left: 6px solid transparent;border-right: 6px solid transparent;border-bottom: 6px solid #353535;display: inline-block; } .dropdown.dropdown-tip.dropdown-anchor-right:after { left: auto;right: 10px; } .dropdown.dropdown-tip.dropdown-anchor-center:after { left: auto;right: 50%; } .dropdown.dropdown-scroll .dropdown-menu, .dropdown.dropdown-scroll .dropdown-panel { max-height: 358px;overflow: auto; } .dropdown .dropdown-menu LI { list-style: none !important;padding: 0 0 !important;margin: 0 !important;line-height: 18px !important; } .dropdown .dropdown-menu LI > A, .dropdown .dropdown-menu LABEL {border-left:0 solid #555;border-right:3px solid #171717;display: block !important;color: #777 !important;text-align:left !important;font-weight:normal !important;font-family: Verdana, Helvetica, Arial, sans-serif !important;font-size:12px !important;text-decoration: none !important;line-height: 18px !important;padding: 3px 15px !important;white-space: nowrap !important;-webkit-transition:all 250ms ease-in-out;-moz-transition:all 250ms ease-in-out;-o-transition:all 250ms ease-in-out;transition:all 250ms ease-in-out; } .dropdown .dropdown-menu LI > A:hover, .dropdown .dropdown-menu LABEL:hover {border-left-width:3px;border-right-width:0;background-color: #0f0f0f !important;color: #FFF !important;cursor: pointer !important;transition:border-width 0.1 ease-in-out !important; } .dropdown .dropdown-menu .dropdown-divider { font-size: 1px;border-top: solid 1px #111;border-bottom:1px solid #242424;padding: 0;margin: 5px 14px 5px 14px; } .dropdown-partners { background: transparent !important;position:absolute;top:20px;right:20px;color: #CCC !important;cursor: pointer;padding: 4px;border-radius: 4px;transition:background 0.2s ease-in-out !important; } .dropdown-partners:hover { background: #333 !important; } .dropdown-partners.dropdown-open { background: #555 !important;color: #FFF !important; } .dropdown-partners.dropdown-open:after { color: #FFF !important; }
Any help you can provide on making this work, as well as advice on what goes where, is massively appreciated. [1] The Secret Sanctuary
|
|
|
| |
|
Cory
|
Jun 3 2014, 02:06 PM
Post #2
|
- Posts:
- 16,587
- Group:
- Members
- Member
- #44,593
- Joined:
- February 12, 2005
|
Have you tried this version?
|
|
|
| |
|
Auroris
|
Jun 4 2014, 07:53 AM
Post #3
|
- Posts:
- 71
- Group:
- Members
- Member
- #610,864
- Joined:
- August 29, 2013
- I'm Browsing With
- Chrome
- My Board URL
- www.TheDDDC.net
|
That's cool.
Functionally, it's doing exactly what I'm after.
I've posted in that topic with a couple of questions about it. [1] Actually posting after this post, but will probably be up when you read this.
|
|
|
| |
| 1 user reading this topic (1 Guest and 0 Anonymous)
|