Welcome Guest [Log In] [Register]
We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Multiquote (on) Multiquote (off)
Add Reply
Dropdown Menu
Topic Started: Jun 2 2014, 09:34 AM (370 Views)
Auroris
Fresh out of the Asylum
[ *  * ]
On one of my forums[1] 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
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Have you tried this version?
Offline Profile Quote Post Goto Top
 
Auroris
Fresh out of the Asylum
[ *  * ]
That's cool.

Functionally, it's doing exactly what I'm after.

I've posted[1] 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.
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · ZetaBoards - Theme & Code Support · Next Topic »
Add Reply