Customization: 1 level drop down menu [Updated]

[en] Menu for phpbb3 (similar to phpbb.com menu) fully adjustable via ACP
[sk] Modifikácia na pridanie plne nastaviteľného menu cez ACP pod headerom

Customization: 1 level drop down menu [Updated]

Postby MagnusB » Thu Apr 29, 2010 2:53 am

Hie,
I really like this mod, but I figured it wasn't excactly what I needed, so I made a custom version of it, hardcoded into overall_header, and thought I would share it with the rest of you. I based it on the blue color, and did not opt for the search (I could not get the menu to work with the search field enabled for some reason). If you want to use this version, you can not have an instance of the original mod installed, at least I don't think so, as it WILL conflict with my changes, and it WILL NOT be possible to add sub items in the ACP. Also not that it is a fairly simple dropdown menu, 1 level only and no mootools or similar (so no fancy animations).

For instructions of IE compatibility, see first reply (IE 6 as of yet untested, but should work)

Alright, this are simple DIY instructions, mostly based on the install doc from this mod, based on proSilver, but can probably be changed easily to subSilver as well.

Requirements:
1. Download the Buttons menu mod from this site
2. Download <style>/template/overall_header.html and <style>/theme/stylesheet.css from your site


DIY:
Extract the mod package, and get out the images from root/styles/prosilver/theme/images/menu/blue/, and the root/styles/prosilver/theme/menu.css file.
You can select any color your want, but these instructions are based on the blue style. If you want another, you have to change the colors your self. Feel free to exclude the Thumbs.db file, it serves no purpose. You can in fact copy the entire style folder over to another location, move the images you want down 1 level (e.g. move .../menu/blue/* to .../menu/*), and delete the rest.

Open menu.css
Then it is time to start editing. Open menu.css and add to the bottom of the file:
Code: Select all
.menu_button a {
   color: #FFF;
}

.menu_button a:hover {
  color: #FFF;
   background: url('{T_THEME_PATH}/images/menu/menu_bg_hover.gif') repeat-x;
   text-decoration: none;
}
/* CSS Drop down addon */
#menu ul ul {
   border-left: 1px solid #1d5683;
   border-right: 1px solid #1d5683;
   border-bottom: 1px solid #1d5683;
   display: none;
   position: absolute;
   z-index: 500;
}

#menu ul li:hover ul {
   display: block;
}

#menu li li {
   background: #2A7BBA;
   width: 170px;
}

#menu li li a:hover {
   background: #11a1e8;
}
#menu li li a, #menu li li.active a, #menu li li a:hover {
   border-top: 1px solid #1d5683
}


The first part is removed from overall_header,htm. I am not sure why it is put there in the first place for this mod, but I am sure there are some good reasons for it. I found that it works just as well by adding it in the CSS file, and as an additional bonus w3c approves of my changes then. Under the comment is the CSS that actually hides and add styling for the sub items, check my link at the end for details on how this works.

As you will note, the colours I have added are based on the blue version. Feel free to change them to any other colour of your choosing (tip: Open up the background images with gimp in order to get the web colours used on them).

Open sylesheet.css
Then open stylesheet.css an add:
Code: Select all
@import url("menu.css");

After @import url("colours.css");

That was the easy part, now to edit the html part of it, which might be a bit trickier. The example only contains 2 menu entries, with 1 drop down, but it will work with several items and drop downs.

I opted for white text and no text decoration for the menu links (no underline)

Open overall_header.html
Then find:
Code: Select all
         <span class="corners-bottom"><span></span></span></div>
      </div>


Change this to:
Code: Select all
         <span class="corners-bottom" style="height:0px;"><span></span></span></div>
      </div>

Then add after:
Code: Select all
<div id="menu" style="clear:both;margin-top: -3px;;background: url('{T_THEME_PATH}/images/menu/menu_bg.gif') repeat-x;">
       <div class="inner">
       <span class="menu_corner-left" style="background: url('{T_THEME_PATH}/images/menu/menu_corner.gif') no-repeat;"></span>
       <span class="menu_corner-right" style="background: url('{T_THEME_PATH}/images/menu/menu_corner_right.gif') no-repeat;"></span>
           <ul>
                 <li class="menu_button" style="float:left;"><a href="{U_PORTAL}" title="{L_PORTAL}" style="font-weight:bold;text-transform:none;">{L_PORTAL}</a></li>
                 <li class="menu_button" style="float:left;"><a href="{U_INDEX}" title="{L_INDEX}" style="font-weight:bold;text-transform:none;">{L_INDEX}</a>
            <ul>
               <li><a href="#" title="Entry 1">Entry 1</a></li>
               <li><a href="#" title="Entry 2">Entry 2</a></li>
            </ul>
         </li>
              </ul>
   
         <span class="corners-bottom"><span></span></span></div>
      </div>
   </div>


Now, the idea here is that you create another ul within the menu li. The first entry links back to my portal, be sure to change this if you do not use that (I have board3 portal installed). Note that this is just a suggestion on my part, and so that I can demostrate how the menu works. You need to change the html so it displays the menu you want it to display, otherwise the menu will not work as expected.
Basically the menu works like this:
Code: Select all
<!-- Create the menu "place holder" -->
<ul>
         <!-- Create menu item (top level)-->
         <li class="menu_button">Top level entry 1
         <!-- Create sub menu for top level entry 1 -->
         <ul>
                <!-- Create a sub item for top entry 1 -->
                <li>Sub item for entry 1</li>
        <!-- Define the sub menu as ended -->
        </ul>
        </li>
       <!-- Another top level item -->
         <li class="menu_button">Top level entry 2
                <!-- Rinse and repeat to create a sub menu for entry 2 -->
                <ul>
                      <li>Sub item for entry 2</li>
                </ul>
         </li>
</ul>

It is important that you only add class="menu_button" to top level items, not sub items. This is because this class adds background to the li, which WILL NOT look good in the dropdown. You can also change this to emulate the phpbb.com dropdown menu, however that will need you to tinker a bit with the html (add a div here and there) and creates some nifty looking images (background and hover).
In the end, you end up with something that looks kind of like this:
Image

If you want a live preview, check out my site: http://www.hah-clan.net (I have expanded my menu a bit now).

Now, if you want to expand the menu to multiple levels, take a look at this tutorial, it is what I based my work on. Also note that this is untested in ANY other browser than Firefox 3.5.9 and on any other style than prosilver. Also note that I do not have the mod installed, and do not work if it will work with the mod installed. This is also my first draft, I have not been able to fully test nor clean up my code yet, so use at own risk (w3c might not be to happy about my changes, have not asked them yet). Just thought I would share this, as I saw allot of people have asked for a drop down menu version of this one. Credit to Kamahl for the nice menu, though!

File structure:
<root>/styles/prosilver/template/overall_header.html
<root>/styles/prosilver/theme/menu.css
<root>/styles/prosilver/theme/menu/<all image files in preferred color>
Last edited by MagnusB on Sun Sep 19, 2010 8:19 pm, edited 2 times in total.
MagnusB
User
User
 
Posts: 3
Joined: Thu Apr 29, 2010 2:33 am

Re: Customization: 1 level drop down menu [Updated]

Postby MagnusB » Sat May 15, 2010 6:39 pm

I got notified that my changes were not compatible with Internet Explorer, in fact the menu did not work at all in IE. I finally got this working in IE7, as expected. The fix is simple, first download csshover3.htc from here: http://www.xs4all.nl/~peterned/csshover.html

3 is version 3 (or latest), but it works with version 1 as well. Version 2 is untested, but I expect it to work. Upload this to your styles template folder (<forum root>/styles/<style>/template), then open overall_header.html and find </head>. Add BEFORE:
Code: Select all
<!-- Dropdown menu IE fix -->
<!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(csshover3.htc);
}
#menu ul li a {height: 1%;}
</style>
<![endif]-->
<!-- End IE fix -->


Enjoy. I have added this fix to my site, and my menu works as expected in IE7 7.0.5730.13.
MagnusB
User
User
 
Posts: 3
Joined: Thu Apr 29, 2010 2:33 am

Re: Customization: 1 level drop down menu [Updated]

Postby trekky » Thu Sep 16, 2010 12:43 pm

I had a look at this but got a bit lost with your instructions and not sure how to make it work.

Which html code are we editing as your instructions didn't seem to say?
trekky
User
User
 
Posts: 2
Joined: Tue Sep 07, 2010 12:36 pm

Re: Customization: 1 level drop down menu [Updated]

Postby MagnusB » Sun Sep 19, 2010 8:13 pm

Are you trying to make it work with the mod installed? Cause the dropdown will not work with this mod, it will only work as a stand alone install. You will need to add the HTML in overall_header.html, I will update my initial post to highlight the files you need todit.
MagnusB
User
User
 
Posts: 3
Joined: Thu Apr 29, 2010 2:33 am

Re: Customization: 1 level drop down menu [Updated]

Postby nameit » Mon Oct 04, 2010 6:05 am

want something with a little bit of a kick, but not over the top.



___________________________________
Persons Unknown Season 1 DVD Box Set
Rookie Blue Season 1 DVD Box Set
One Foot in The Grave Complete Series DVD Box Set
nameit
User
User
 
Posts: 2
Joined: Mon Oct 04, 2010 6:01 am


Return to Buttons menu / Tlačítkové menu

Who is online

Users browsing this forum: No registered users and 0 guests

cron