CSS Pro Dropdown Menu

[Post Bot]

» CSS Pro Dropdown Menu
Written by RMcGirr83

With the help of this documentation, you can get a slide down menu for your forum. In this post I will show you how to get a drop down that looks like this:

onto your prosilver based style. For subsilver2, you're on your own but the edits will be very similar

» phpBB modification

The very first step you do is go to this site and download the files. Once downloaded, upload the files into your styles theme folder keeping the directory structure (eg, styles/prosilver/theme/pro_dropdown_6/pro_dropdown_6.css). You only have to upload the pro_dropdown_6.css, arrow.gif and arrow_over.gif files. Then take this code

Code: Select all

/* ================================================================ 
This copyright notice must be kept untouched in the stylesheet at 
all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/pro_drop6.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */


#nav {
   padding:0;
   margin: 0;
   list-style:none;
   height:33px;
/*   position:absolute;*/
   z-index:200;
   font-family: arial, verdana, sans-serif;
}

#nav li.top {
   display:block;
   float: left;
}

#nav li a.top_link {
   display:block;
   float: left;
   height:33px;
   line-height:31px;
   color:#FFF;
   text-decoration:none;
   font-size:12px;
   font-weight:bold;
   padding:0 0 0 12px;
   cursor:pointer;
}

#nav li a.top_link span {
   float: left;
   display:block;
   padding:0 24px 0 12px;
   height:33px;
}

#nav li a.top_link span.down {
   float: left;
   display:block;
   padding:0 24px 0 12px;
   height:33px;
}

#nav li:hover a.top_link,
#nav a.top_link:hover {
   color:#ff0000;
}

#nav li:hover a.top_link span,
#nav a.top_link:hover span {
}

#nav li:hover a.top_link span.down,
#nav a.top_link:hover span.down {
   padding-bottom:3px;
}

#nav table {
   border-collapse:collapse;
   padding:0;
   margin:0;
   position:absolute;
   left:0;
   top:0;
}

#nav li:hover {
   position:relative;
   z-index:200;
}

#nav a:hover {
   position:relative;
   white-space:normal;
   z-index:200;
}

#nav :hover ul.sub {
   left:1px;
   top:34px;
   background-color: #DCDEE2;
   padding:3px;
   border: 1px solid #FFF;
   white-space:nowrap;
   width:185px;
   height:auto;
   z-index:300;
   font-weight:bold;
}

#nav :hover ul.sub li {
   display:block;
   height:20px;
   position:relative;
   float:left;
   width:185px;
   font-weight:bold;
}

#nav :hover ul.sub li a {
   display:block;
   font-size:11px;
   height:18px;
   width:183px;
   line-height:18px;
   text-indent:5px;
   color:#3365ac;
   text-decoration:none;
   font-weight:bold;
}

#nav li ul.sub li a.fly {
   background: url('{T_THEME_PATH}/pro_dropdown_6/arrow_over.gif') 175px 6px no-repeat;
}

#nav :hover ul.sub li a:hover {
   color:#3365ac;
   background-color: #FFF;
   border-color:#FFF;
   font-weight:bold;
}

#nav :hover ul.sub li a.fly:hover {
   background: #FFF url('{T_THEME_PATH}/pro_dropdown_6/arrow.gif') 175px 6px no-repeat;
   color:#D31141;
}

#nav li b {
   display:block;
   font-size:11px;
   height:18px;
   width:183px;
   line-height:18px;
   margin-bottom:3px;
   text-indent:6px;
   color:#000;
   border-bottom:1px solid #7fffff;
   cursor:default;
}

#nav a:hover a:hover ul,
#nav a:hover a:hover a:hover ul,
#nav a:hover a:hover a:hover a:hover ul,
#nav a:hover a:hover a:hover a:hover a:hover ul {
   left:89px;
   top:-4px;
   padding:3px;
   border:1px solid #000;
   white-space:nowrap;
   width:183px;
   z-index:400;
   height:auto;
}

#nav ul,
#nav a:hover ul ul,
#nav a:hover a:hover ul ul,
#nav a:hover a:hover a:hover ul ul,
#nav a:hover a:hover a:hover a:hover ul ul {
   position:absolute;
   left:-9999px;
   top:-9999px;
   width:0;
   height:0;
   margin:0;
   padding:0;
   list-style:none;
}

#nav li:hover li:hover > ul {
   left: 183px; /* distance from right margin of main drop */
   top: -4px;
   background-color: #DCDEE2;
   padding: 3px;
   border: 1px solid #FFF;
   white-space: nowrap;
   width: 185px; /* width of secondary drop */
   z-index: 400;
   height: auto;
}

#nav li:hover > ul ul {
   position:absolute;
   left:-9999px;
   top:-9999px;
   width:0;
   height:0;
   margin:0;
   padding:0;
   list-style:none;
}

#nav li:hover li:hover > a.fly {
   background: #FFF url('{T_THEME_PATH}/pro_dropdown_6/arrow.gif') 175px 6px no-repeat;
   color:#DCDEE2;
   font-weight: bold;
   text-decoration:none;
}

#nav li:hover li:hover > li a.fly {
   background: #FFF url('{T_THEME_PATH}/pro_dropdown_6/arrow.gif') 175px 6px no-repeat;
   color:#DCDEE2;
   font-weight: bold;
   text-decoration:none;
} 

and copy it into a strict text editor (notepad++ anyone?), then save it as pro_dropdown_6.css and upload it into your styles/prosilver/theme/pro_dropdown_6 directory overwritting the original one. Then, for the file edits.

OPEN

styles/prosilver/theme/stylesheet.css

FIND

Code: Select all

@import url("colours.css");

AFTER, ADD

Code: Select all

@import url("pro_dropdown_6/pro_dropdown_6.css");

OPEN

styles/prosilver/template/overall_header.html

FIND

Code: Select all

<a id="top" name="top" accesskey="t"></a>

AFTER, ADD

Code: Select all

			<div id="drop_down">
        		<div class="headerbar">
        			<div class="inner"><span class="corners-top"><span></span></span>			
					<ul id="nav">
							<!-- IF S_BOARD_DISABLED and S_USER_LOGGED_IN -->
							<li class="top"><a href="{U_INDEX}" class="top_link"><span style="color: red;">{L_BOARD_DISABLED}</span></a></li>
							<!-- ENDIF -->
							<!-- IF not S_IS_BOT -->
							<li class="top"><a href="{U_LOGIN_LOGOUT}" class="top_link"><span>{L_LOGIN_LOGOUT}</span></a></li>
							<!-- ENDIF -->
							<!-- IF U_RESTORE_PERMISSIONS -->
							<li class="top"><a href="{U_RESTORE_PERMISSIONS}" class="top_link"><span>{L_RESTORE_PERMISSIONS}</span></a></li>
							<!-- ENDIF -->
							<!-- IF not S_IS_BOT -->
							   <!-- IF S_USER_LOGGED_IN -->
								   <!-- IF S_DISPLAY_PM -->
									<li class="top"><a href="{U_PRIVATEMSGS}" class="top_link"><span>{PRIVATE_MESSAGE_INFO}<!-- IF PRIVATE_MESSAGE_INFO_UNREAD -->, {PRIVATE_MESSAGE_INFO_UNREAD}<!-- ENDIF --></span></a></li>
									<!-- ENDIF -->
									<!-- ELSE -->
									<li class="top"><a href="{U_REGISTER}" class="top_link"><span>{L_REGISTER}</span></a></li>
									<!-- ENDIF -->
							<!-- ENDIF -->
							<!-- IF S_USER_LOGGED_IN -->
							<li class="top"><a href="#" id="controlpanel" class="top_link"><span class="down">{L_CONTROL_PANEL}</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
							  <!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">
								 <!-- IF S_USER_LOGGED_IN -->
									<li><b>{L_USERS}</b></li>
								 <li><a href="{U_PROFILE}" class="fly">{L_PROFILE}<!--[if gte IE 7]><!--></a><!--<![endif]-->
									   <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
										  <li><a href="./ucp.php?i=163">{L_UCP_MAIN}</a></li>
										  <li><a href="./ucp.php?i=164">{L_UCP_PROFILE}</a></li>
												<li><a href="./ucp.php?i=165">{L_UCP_PREFS}</a></li>
										  <li><a href="./ucp.php?i=166">{L_PRIVATE_MESSAGES}</a></li>
												<li><a href="./ucp.php?i=167">{L_UCP_USERGROUPS}</a></li>
												<li><a href="./ucp.php?i=168">{L_UCP_ZEBRA}</a></li>
									   </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
								 </li>
									<!-- ENDIF -->
								 <!-- IF U_MCP -->
									<li><b>{L_MODERATORS}</b></li>
									<li><a href="{U_MCP}">{L_MCP}</a></li>
									<!-- ENDIF -->
									<!-- IF U_ACP -->
									<li><b>{L_ADMINISTRATORS}</b></li>
									<li><a href="{U_ACP}">{L_ACP}</a></li>
									<!-- ENDIF -->
							  </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
						   </li>
							<!-- ENDIF -->
						   <li class="top"><a href="{U_INDEX}" id="forumlinks" class="top_link"><span class="down">{L_FORUM}</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
							  <!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">
								   <li><b>{L_INFORMATION}</b></li>
								 <li><a href="{U_FAQ}">{L_FAQ}</a></li>
								 <!-- IF S_DISPLAY_MEMBERLIST --><li><a href="{U_MEMBERLIST}">{L_MEMBERLIST}</a></li><!-- ENDIF -->
								 <!-- IF S_USER_LOGGED_IN -->
									<li><b>{L_MANAGE}</b></li>
								 <!-- IF U_MARK_FORUMS --><li><a href="{U_MARK_FORUMS}">{L_MARK_FORUMS_READ}</a></li><!-- ENDIF -->
									<!-- IF U_MARK_TOPICS --><li><a href="{U_MARK_TOPICS}">{L_MARK_TOPICS_READ}</a></li><!-- ENDIF -->
								<!-- ENDIF -->
							  </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
						   </li>
							<!-- IF S_DISPLAY_SEARCH or (S_USER_LOGGED_IN and not S_IS_BOT) -->
						   <li class="top"><a href="{U_SEARCH}" id="forumsearch" class="top_link"><span class="down">{L_SEARCH}</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
							  <!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">
									<li><b>{L_COMMON_SEARCHES}</b></li>
								 <li><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a></li>
								 <li><a href="{U_SEARCH_ACTIVE_TOPICS}">{L_SEARCH_ACTIVE_TOPICS}</a></li>
									<!-- IF S_USER_LOGGED_IN -->
								 <li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a></li>
								 <li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></li>
									<!-- ENDIF -->
									<li><b>{L_COMMON_SEARCHES}</b></li>
								 <li><a href="{U_SEARCH}">{L_SEARCH_ADV}</a></li>
							  </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
						   </li>
							<!-- ENDIF -->
						</ul>
						</div>
        			<span class="corners-bottom"><span></span></span>
				</div>	
        	</div>

FIND

Code: Select all

<ul class="linklist navlinks">

REPLACE, WITH

Code: Select all

<ul class="linklist">

FIND

Code: Select all

			<!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
			<ul class="linklist leftside">
				<li class="icon-ucp">
					<a href="{U_PROFILE}" title="{L_PROFILE}" accesskey="u">{L_PROFILE}</a>
						<!-- IF S_DISPLAY_PM --> (<a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}</a>)<!-- ENDIF --> &bull; 
					<a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>
					<!-- IF U_RESTORE_PERMISSIONS --> &bull;
					<a href="{U_RESTORE_PERMISSIONS}">{L_RESTORE_PERMISSIONS}</a>
					<!-- ENDIF -->
				</li>
			</ul>
			<!-- ENDIF -->

			<ul class="linklist rightside">
				<li class="icon-faq"><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</a></li>
				<!-- IF not S_IS_BOT -->
					<!-- IF S_DISPLAY_MEMBERLIST --><li class="icon-members"><a href="{U_MEMBERLIST}" title="{L_MEMBERLIST_EXPLAIN}">{L_MEMBERLIST}</a></li><!-- ENDIF -->
					<!-- IF not S_USER_LOGGED_IN and S_REGISTER_ENABLED --><li class="icon-register"><a href="{U_REGISTER}">{L_REGISTER}</a></li><!-- ENDIF -->
					<li class="icon-logout"><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="l">{L_LOGIN_LOGOUT}</a></li>
				<!-- ENDIF -->
			</ul>

Remove it

OPEN

styles/prosilver/template/viewforum_body.html

FIND

Code: Select all

<!-- IF not S_IS_BOT and U_MARK_FORUMS -->
<ul class="linklist">
	<li class="rightside"><a href="{U_MARK_FORUMS}">{L_MARK_FORUMS_READ}</a></li>
</ul>
<!-- ENDIF -->

Remove it

FIND

Code: Select all

<!-- IF not S_IS_BOT and U_MARK_TOPICS --><a href="{U_MARK_TOPICS}" accesskey="m">{L_MARK_TOPICS_READ}</a> &bull; <!-- ENDIF -->

Remove it

FIND

Code: Select all

<!-- IF TOTAL_TOPICS and not S_IS_BOT and U_MARK_TOPICS --><a href="{U_MARK_TOPICS}">{L_MARK_TOPICS_READ}</a> &bull;  <!-- ENDIF -->

Remove it

OPEN

includes/functions.php

FIND

Code: Select all

// gzip_compression

BEFORE, ADD

Code: Select all

// BEGIN CSS Menu Drop Down	
	$user->add_lang('ucp');
// END CSS Menu Drop Down

OPEN

language/en/common.php

FIND

Code: Select all

	'PROFILE'				=> 'User Control Panel',

AFTER ADD

Code: Select all

// BEGIN CSS Menu Drop Down
	'CONTROL_PANEL'			=> 'Control Panel',
	'MANAGE'				=> 'Manage',
	'COMMON_SEARCHES'		=> 'Common Searches',
// END CSS Menu Drop Down

Re-upload the files, login to your forum go to the ACP and refresh the template and theme.

But Rich, the drop down is f-ugly and doesn't match my style at all.

Well that's because the drop down css isn't setup for the correct coloring for whatever style you are using. So you also need to edit the pro_drowdown_6.css file for your style. A few hints

#FF0000 represents the color that the wording changes to when someone mouses over the menu
#DCDEE2 represents the background color of the drop downs
#7fffff represents the underline of the dropdown headers


When all is said and done, you should, hopefully, end up with something that looks like the pic above.

It won't look exactly like that because I have other things in my menu, but close enough.

Good luck and any problems, post up!!

[Ephemeraboy]

stoker..
can we do tha same steps for another css dropdwon menu source
(not only or that)
thx in advanced
hm..
i have done it
when I go to tab UCP and go to e.g Profile
it says
general error
module is not acessible

EDIT

Code: Select all

<li><a href="./ucp.php?i=163">{L_UCP_MAIN}</a></li>, should be i=171
<li><a href="./ucp.php?i=164">{L_UCP_PROFILE}</a></li>, should be i=172
<li><a href="./ucp.php?i=165">{L_UCP_PREFS}</a></li>, should be i=173
<li><a href="./ucp.php?i=166">{L_PRIVATE_MESSAGES}</a></li>, should be i=174
<li><a href="./ucp.php?i=167">{L_UCP_USERGROUPS}</a></li>, should be i=175
<li><a href="./ucp.php?i=168">{L_UCP_ZEBRA}</a></li>, should be i=176

thx stoker..very good tutorial

[Ephemeraboy]

hm..
i have tried to make the dropdown menu below the board index..
but, after do that, the interface of the forum changed (see image below)
any idea to help..??

[cisco007]

check and make sure you don't have or missing an extra </div> at the end!

[Ephemeraboy]

check and make sure you don't have or missing an extra </div> at the end!

yes i have checked it...
but it is correct...

[cisco007]

can i have a link to your board?

[Ephemeraboy]

Code: Select all

http://guyzlife.co.cc/forum

and this my file of overhall_header

[cisco007]

hope you backed up your old file, but anyways i had to change alot of things on it, i tested it and it works good! try this one!

overall_header.rar

[Ephemeraboy]

thx very much cisco..

[Ephemeraboy]

hm..
want to ask again
when i changed the font colour of the menu
(because the colour is white so it hard to see)
when i turn mouse there, the colour doesn't change