[HOW TO] Integrate a CSS dropdown Menu into phpBB Styles

How-to's, little tricks, tutorials, code examples (snippets) and read-me's.

Re: [HOW TO] Integrate a CSS dropdown Menu into phpBB Styles

Postby cla1067 » 14 Oct 2009, 01:54

I found it finally don't know how I missed it.

in common.css
find
Code: Select all
.headerbar {
   background: #ebebeb none repeat-x 0 0;
   color: #FFFFFF;
   margin-bottom: 4px;
   padding: 0 5px;
}


I replaced with
Code: Select all
.headerbar {
   background: #ebebeb none repeat-x 0 0;
   color: #FFFFFF;
   margin-bottom: 0px;
   padding: 0 5px;
}


I really don't know how I missed that. I cleaned up my coding some as well.
Thanks for the help though and quick responses.
cla1067
Cadet I
Cadet I
 
Posts: 10
Joined: 09 Dec 2008, 20:17
Gender: Male
phpBB Knowledge: 2




phpBB Academy at StarTrekGuide
Support STG
Using PayPal Donate

Re: [HOW TO] Integrate a CSS dropdown Menu into phpBB Styles

Postby wired076 » 14 Oct 2009, 02:19

np. Glad u fixed it. It is always important to keep your code clean and documented to help you when you hit problems like this.

[ Post made via Mobile Device ] Image
wired076    
Supporter
Supporter
 
Posts: 494
Joined: 03 Feb 2009, 16:51
Location: Australia
Gender: Male
phpBB Knowledge: 5

Re: [HOW TO] Integrate a CSS dropdown Menu into phpBB Styles

Postby cla1067 » 16 Oct 2009, 10:08

I need help again sorry. As seen in previous pics i want two nav bars. The nav bar above the banner would have drop down menus and is meant to navigate through content and information on the site. The second nav bar is meant to be a control panel type thing for login apc mcp ucp and messages. The problem is that if i have both of those nav bars then the drop down will hide behind the second nav bar. I tried fixing this but have had no luck. Can you please tell me what I have to change so that the first nav bar dropdown menus don't hide behind the second nav bar? thanks

overall_header.html
Spoiler:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" lang="{S_USER_LANG}" xml:lang="{S_USER_LANG}">
<head>

<meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-language" content="{S_USER_LANG}" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="resource-type" content="document" />
<meta name="distribution" content="global" />
<meta name="copyright" content="2000, 2002, 2005, 2007 phpBB Group" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
{META}
<title>{SITENAME} &bull; <!-- IF S_IN_MCP -->{L_MCP} &bull; <!-- ELSEIF S_IN_UCP -->{L_UCP} &bull; <!-- ENDIF -->{PAGE_TITLE}</title>

<!--
phpBB style name: prosilver
Based on style: prosilver (this is the default phpBB3 style)
Original author: Tom Beddard ( http://www.subBlue.com/ )
Modified by:

NOTE: This page was generated by phpBB, the free open-source bulletin board package.
The phpBB Group is not responsible for the content of this page and forum. For more information
about phpBB please visit http://www.phpbb.com
-->

<script type="text/javascript">
// <![CDATA[
var jump_page = '{LA_JUMP_PAGE}:';
var on_page = '{ON_PAGE}';
var per_page = '{PER_PAGE}';
var base_url = '{A_BASE_URL}';
var style_cookie = 'phpBBstyle';
var style_cookie_settings = '{A_COOKIE_SETTINGS}';
var onload_functions = new Array();
var onunload_functions = new Array();

<!-- IF S_USER_PM_POPUP -->
if ({S_NEW_PM})
{
var url = '{UA_POPUP_PM}';
window.open(url.replace(/&amp;/g, '&'), '_phpbbprivmsg', 'height=225,resizable=yes,scrollbars=yes, width=400');
}
<!-- ENDIF -->

/**
* Find a member
*/
function find_username(url)
{
popup(url, 760, 570, '_usersearch');
return false;
}

/**
* New function for handling multiple calls to window.onload and window.unload by pentapenguin
*/
window.onload = function()
{
for (var i = 0; i < onload_functions.length; i++)
{
eval(onload_functions[i]);
}
}

window.onunload = function()
{
for (var i = 0; i < onunload_functions.length; i++)
{
eval(onunload_functions[i]);
}
}

// ]]>
</script>
<script type="text/javascript" src="{T_TEMPLATE_PATH}/styleswitcher.js"></script>
<script type="text/javascript" src="{T_TEMPLATE_PATH}/forum_fn.js"></script>

<link href="{T_THEME_PATH}/print.css" rel="stylesheet" type="text/css" media="print" title="printonly" />
<link href="{T_STYLESHEET_LINK}" rel="stylesheet" type="text/css" media="screen, projection" />

<link href="{T_THEME_PATH}/normal.css" rel="stylesheet" type="text/css" title="A" />
<link href="{T_THEME_PATH}/medium.css" rel="alternate stylesheet" type="text/css" title="A+" />
<link href="{T_THEME_PATH}/large.css" rel="alternate stylesheet" type="text/css" title="A++" />

<!-- IF S_CONTENT_DIRECTION eq 'rtl' -->
<link href="{T_THEME_PATH}/bidi.css" rel="stylesheet" type="text/css" media="screen, projection" />
<!-- ENDIF -->

</head>

<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">
<div class="outside">
<div class="top-left"></div><div class="top-center"></div><div class="top-right"></div>
<div class="inside">
<div class="notopgap">

<div id="wrap">
<a id="top" name="top" accesskey="t"></a>
<div id="page-header">
<span class="preload1"></span>
<span class="preload2"></span>

<ul id="nav">
<li class="top"><img src="{T_THEME_PATH}/images/menu1/menu_corner.gif" title="" alt="" /></li>

<li class="top"><a href="{U_INDEX}" id="homes" class="top_link"><span>Home</span></a></li>

<li class="top"><a href="{U_INDEX}" id="forums" class="top_link"><span class="down">Forums</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">
<li><b>Global Info</b></li>
<li><a href="http://www.thebehemoths.stupidwhitekid.com/community/viewforum.php?f=3">News</a></li>
<li><b>Catagories</b></li>
<li><a href="http://www.thebehemoths.stupidwhitekid.com/community/viewforum.php?f=1">Community</a></li>
<li><a href="http://www.thebehemoths.stupidwhitekid.com/community/viewforum.php?f=6">APB</a></li>
<li><a href="http://www.thebehemoths.stupidwhitekid.com/community/viewforum.php?f=7">Diablo 3</a></li>
<li><a href="http://www.thebehemoths.stupidwhitekid.com/community/viewforum.php?f=16">Support</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li class="top"><a href="{U_BLANK}" id="gallery" class="top_link"><span class="down">Gallery</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">
<li><b>sub header 1</b></li>
<li><a href="{U_BLANK}">Topic 1</a></li>
<li><a href="{U_BLANK}">Topic 2</a></li>
<li><b>sub header 2</b></li>
<li><a href="{U_BLANK}">Topic 1</a></li>
<li><a href="{U_BLANK}">Topic 2</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li class="top"><a href="{U_BLANK}" id="games" class="top_link"><span class="down">Games</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">
<li><b>sub header 1</b></li>
<li><a href="{U_BLANK}">Topic 1</a></li>
<li><a href="{U_BLANK}">Topic 2</a></li>
<li><b>sub header 2</b></li>
<li><a href="{U_BLANK}">Topic 1</a></li>
<li><a href="{U_BLANK}">Topic 2</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li class="top"><a href="{U_BLANK}" id="videos" class="top_link"><span class="down">Videos</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">
<li><b>sub header 1</b></li>
<li><a href="{U_BLANK}">Topic 1</a></li>
<li><a href="{U_BLANK}">Topic 2</a></li>
<li><b>sub header 2</b></li>
<li><a href="{U_BLANK}">Topic 1</a></li>
<li><a href="{U_BLANK}">Topic 2</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li class="top"><a href="{U_MEMBERLIST}" id="members" class="top_link"><span class="down">Members</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">
<li><b>The Team</b></li>
<li><a href="{U_BLANK}">Admins</a></li>
<li><a href="{U_BLANK}">Mods</a></li>
<li><a href="{U_BLANK}">Clan Members</a></li>
<li><a href="{U_BLANK}">Community Bots</a></li>
<li><b>APB</b></li>
<li><a href="{U_BLANK}">Founders</a></li>
<li><a href="{U_BLANK}">Members</a></li>
<li><b>Diablo 3</b></li>
<li><a href="{U_BLANK}">Founders</a></li>
<li><a href="{U_BLANK}">Members</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<!-- IF S_DISPLAY_SEARCH -->
<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>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>Common Searches</b></li>
<li><a href="{U_SEARCH}">Advanced Search</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!-- ENDIF -->
<li class="top_r"><img src="{T_THEME_PATH}/images/menu1/menu_corner_right.gif" title="" alt="" /></li>
</ul>

<div class="headerbar">
<div class="inner"><span class="corners-top1"><span></span></span>
<div id="site-description">
<a href="{U_INDEX}" title="{L_INDEX}" id="logo"><img src="images/spacer.gif" width="870" height="180" alt="" /></a>
<p style="display: none;"><a href="#start_here">{L_SKIP}</a></p>
</div>
<span class="corners-bottom1"><span></span></span></div>
</div>


<ul id="nav2">
<li class="top"><img src="{T_THEME_PATH}/images/menu2/menu_corner.gif" title="" alt="" /></li>

<li class="top"><a href="{U_INDEX}" id="homes2" class="top_link"><span>Home2</span></a></li>

<li class="top_r"><img src="{T_THEME_PATH}/images/menu2/menu_corner_right.gif" title="" alt="" /></li>
</ul>
<br />


<div class="navbar">
<div class="inner"><span class="corners-top"><span></span></span>

<ul class="linklist navlinks">
<li class="icon-home"><a href="{U_INDEX}" accesskey="h">{L_INDEX}</a> <!-- BEGIN navlinks --> <strong>&#8249;</strong> <a href="{navlinks.U_VIEW_FORUM}">{navlinks.FORUM_NAME}</a><!-- END navlinks --></li>

<!--<li class="rightside"><a href="#" onclick="fontsizeup(); return false;" class="fontsize" title="{L_CHANGE_FONT_SIZE}">{L_CHANGE_FONT_SIZE}</a></li>-->

<!-- IF U_EMAIL_TOPIC --><li class="rightside"><a href="{U_EMAIL_TOPIC}" title="{L_EMAIL_TOPIC}" class="sendemail">{L_EMAIL_TOPIC}</a></li><!-- ENDIF -->
<!-- IF U_EMAIL_PM --><li class="rightside"><a href="{U_EMAIL_PM}" title="{L_EMAIL_PM}" class="sendemail">{L_EMAIL_PM}</a></li><!-- ENDIF -->
<!-- IF U_PRINT_TOPIC --><li class="rightside"><a href="{U_PRINT_TOPIC}" title="{L_PRINT_TOPIC}" accesskey="p" class="print">{L_PRINT_TOPIC}</a></li><!-- ENDIF -->
<!-- IF U_PRINT_PM --><li class="rightside"><a href="{U_PRINT_PM}" title="{L_PRINT_PM}" accesskey="p" class="print">{L_PRINT_PM}</a></li><!-- ENDIF -->
</ul>

<!-- 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>
<li class="icon-search"><a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH}</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>

<span class="corners-bottom"><span></span></span></div>
</div>

</div>

<a name="start_here"></a>
<div id="page-body">

<!-- IF S_BOARD_DISABLED and S_USER_LOGGED_IN and (U_MCP or U_ACP) -->
<div id="message" class="rules">
<div class="inner"><span class="corners-top"><span></span></span>
<strong>{L_INFORMATION}:</strong> {L_BOARD_DISABLED}
<span class="corners-bottom"><span></span></span></div>
</div>
<!-- ENDIF -->


Menu1 ( #nav)
Spoiler:
.preload1 {
background: url('./images/menu1/six_0a.gif');
}

.preload2 {
background: url('./images/menu1/six_1a.gif');
}

#nav {
padding:0;
margin: 0;
list-style:none;
height:33px;
background: url('./images/menu1/six_0.gif') repeat-x;
position:relative;
z-index:200;
font-family: arial, verdana, sans-serif;
}

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

#nav li.top_r{
display:block;
float: right;
}

#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;
background: url('./images/menu1/six_0.gif');
}

#nav li a.top_link span {
float: left;
display:block;
padding:0 24px 0 12px;
height:33px;
background: url('./images/menu1/six_0.gif') right top no-repeat;
}

#nav li a.top_link span.down {
float: left;
display:block;
padding:0 24px 0 12px;
height:33px;
background: url('./images/menu1/six_0a.gif') no-repeat right top;
}

#nav li:hover a.top_link,
#nav a.top_link:hover {
color:#FFF;
background: url('./images/menu1/six_1.gif') no-repeat;
}

#nav li:hover a.top_link span,
#nav a.top_link:hover span {
background: url('./images/menu1/six_1.gif') no-repeat right top;
}

#nav li:hover a.top_link span.down,
#nav a.top_link:hover span.down {
background: url('./images/menu1/six_1a.gif') no-repeat right top;
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: #000;
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('./images/menu1/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('./images/menu1/arrow.gif') 175px 6px no-repeat;
color:#3365ac;
}

#nav li b {
display:block;
font-size:11px;
height:18px;
width:183px;
line-height:18px;
margin-bottom:3px;
text-indent:6px;
color:#FFF;
border-bottom:1px solid #FF8A19;
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: #000;
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('./images/menu1/arrow.gif') 175px 6px no-repeat;
color:#3365ac;
font-weight: bold;
text-decoration:none;
}

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


menu2 (#nav2)
Spoiler:
.preload3 {
background: url('./images/menu2/six_0a.gif');
}

.preload4 {
background: url('./images/menu2/six_1a.gif');
}

#nav2 {
padding:0;
margin: 0;
list-style:none;
height:33px;
background: url('./images/menu2/six_0.gif') repeat-x;
position:relative;
z-index:200;
font-family: arial, verdana, sans-serif;
}

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

#nav2 li.top_r{
display:block;
float: right;
}

#nav2 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;
background: url('./images/menu2/six_0.gif');
}

#nav2 li a.top_link span {
float: left;
display:block;
padding:0 24px 0 12px;
height:33px;
background: url('./images/menu2/six_0.gif') right top no-repeat;
}

#nav2 li a.top_link span.down {
float: left;
display:block;
padding:0 24px 0 12px;
height:33px;
background: url('./images/menu2/six_0a.gif') no-repeat right top;
}

#nav2 li:hover a.top_link,
#nav2 a.top_link:hover {
color:#FFF;
background: url('./images/menu2/six_1.gif') no-repeat;
}

#nav2 li:hover a.top_link span,
#nav2 a.top_link:hover span {
background: url('./images/menu2/six_1.gif') no-repeat right top;
}

#nav2 li:hover a.top_link span.down,
#nav2 a.top_link:hover span.down {
background: url('./images/menu2/six_1a.gif') no-repeat right top;
padding-bottom:3px;
}

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

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

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

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

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

#nav2 :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;
}

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

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

#nav2 :hover ul.sub li a.fly:hover {
background: #FFF url('./images/menu2/arrow.gif') 175px 6px no-repeat;
color:#3365ac;
}

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

#nav2 a:hover a:hover ul,
#nav2 a:hover a:hover a:hover ul,
#nav2 a:hover a:hover a:hover a:hover ul,
#nav2 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;
}

#nav2 ul,
#nav2 a:hover ul ul,
#nav2 a:hover a:hover ul ul,
#nav2 a:hover a:hover a:hover ul ul,
#nav2 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;
}

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

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

#nav2 li:hover li:hover > a.fly {

background: #FFF url('./images/menu2/arrow.gif') 175px 6px no-repeat;
color:#3365ac;
font-weight: bold;
text-decoration:none;
}

#nav2 li:hover li:hover > li a.fly {
background: #FFF url('./images/menu2/arrow.gif') 175px 6px no-repeat;
color:#3365ac;
font-weight: bold;
text-decoration:none;
}
Attachments
carboncopy.zip
all files related to both nav bars
(19.45 KiB) Downloaded 29 times
cla1067
Cadet I
Cadet I
 
Posts: 10
Joined: 09 Dec 2008, 20:17
Gender: Male
phpBB Knowledge: 2

Re: [HOW TO] Integrate a CSS dropdown Menu into phpBB Styles

Postby cla1067 » 19 Oct 2009, 17:57

I changed z-index to 201 in the first menu and and left menu2 at 200. It fixed my problem.

z-index:200; in .css file
Spoiler:
#nav2 {
padding:0;
margin: 0;
list-style:none;
height:33px;
background: url('./images/menu2/six_0.gif') repeat-x;
position:relative;
z-index:200;
font-family: arial, verdana, sans-serif;
}


now i get to put everything back together haha
cla1067
Cadet I
Cadet I
 
Posts: 10
Joined: 09 Dec 2008, 20:17
Gender: Male
phpBB Knowledge: 2

Re: [HOW TO] Integrate a CSS dropdown Menu into phpBB Styles

Postby vantoria » 18 Nov 2009, 23:26

Hi there. I just found this thread and decided to insert it into my phpbb3 forum. I am currently using prosliver and trying to insert the code myself.
I've added the code manually into this files.
template/overall_header.html
others, i am following the guide as stated in the first post.

the code for the overall_header.html is

Spoiler:
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" lang="{S_USER_LANG}" xml:lang="{S_USER_LANG}">
<head>

<meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-language" content="{S_USER_LANG}" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="resource-type" content="document" />
<meta name="distribution" content="global" />
<meta name="copyright" content="2000, 2002, 2005, 2007 phpBB Group" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
{META}
<title>{SITENAME} &bull; <!-- IF S_IN_MCP -->{L_MCP} &bull; <!-- ELSEIF S_IN_UCP -->{L_UCP} &bull; <!-- ENDIF -->{PAGE_TITLE}</title>
<!-- IF FAVICON --><link rel="shortcut icon" href="{FAVICON}" type="image/x-icon" /><!-- ENDIF -->
<!-- MOD : MSSTI RSS Feeds (V1.2.1) - Start //-->
<!-- IF S_FEEDS -->
<link rel="alternate" type="application/rss+xml" title="{L_RSS_FEEDS} - {SITENAME}" href="{U_RSS}" />
<!-- IF U_FEEDS_NEWS --><link rel="alternate" type="application/rss+xml" title="{L_RSS_FEEDS} - {L_RSS_NEWS}" href="{U_FEEDS_NEWS}" /><!-- ENDIF -->
<!-- IF U_FEEDS_NEWPOST --><link rel="alternate" type="application/rss+xml" title="{L_RSS_FEEDS} - {L_RSS_NEWPOST}" href="{U_FEEDS_NEWPOST}" /><!-- ENDIF -->
<!-- IF U_FEEDS_FORUMS --><link rel="alternate" type="application/rss+xml" title="{L_RSS_FEEDS} - {L_ALL_FORUMS}" href="{U_FEEDS_FORUMS}" /><!-- ENDIF -->
<!-- IF U_FEEDS_THREADS --><link rel="alternate" type="application/rss+xml" title="{L_RSS_FEEDS} - {L_ALL_TOPICS}" href="{U_FEEDS_THREADS}" /><!-- ENDIF -->
<!-- IF U_FEEDS_POSTS --><link rel="alternate" type="application/rss+xml" title="{L_RSS_FEEDS} - {L_ALL_POSTS}" href="{U_FEEDS_POSTS}" /><!-- ENDIF -->
<!-- IF U_FEEDS_ATTACH --><link rel="alternate" type="application/rss+xml" title="{L_RSS_FEEDS} - {L_RSS_ATTACH}" href="{U_FEEDS_ATTACH}" /><!-- ENDIF -->
<!-- IF U_FEEDS_EGOSEARCH --><link rel="alternate" type="application/rss+xml" title="{L_RSS_FEEDS} - {L_YOUR_POSTS}" href="{U_FEEDS_EGOSEARCH}" /><!-- ENDIF -->
<!-- IF U_FEEDS_FORUM --><link rel="alternate" type="application/rss+xml" title="{L_RSS_FEEDS} - {L_FORUM} {FORUM_NAME}" href="{U_FEEDS_FORUM}" /><!-- ENDIF -->
<!-- IF U_FEEDS_THREAD --><link rel="alternate" type="application/rss+xml" title="{L_RSS_FEEDS} - {L_TOPIC} {TOPIC_TITLE}" href="{U_FEEDS_THREAD}" /><!-- ENDIF -->
<!-- ENDIF -->
<!-- MOD : MSSTI RSS Feeds (V1.2.1) - End //-->

<!--
   phpBB style name: prosilver
   Based on style:   prosilver (this is the default phpBB3 style)
   Original author:  Tom Beddard ( http://www.subBlue.com/ )
   Modified by:     
   
   NOTE: This page was generated by phpBB, the free open-source bulletin board package.
         The phpBB Group is not responsible for the content of this page and forum. For more information
         about phpBB please visit http://www.phpbb.com
-->


<script type="text/javascript">
// <![CDATA[
   var jump_page = '{LA_JUMP_PAGE}:';
   var on_page = '{ON_PAGE}';
   var per_page = '{PER_PAGE}';
   var base_url = '{A_BASE_URL}';
   var style_cookie = 'phpBBstyle';
   var style_cookie_settings = '{A_COOKIE_SETTINGS}';
   var onload_functions = new Array();
   var onunload_functions = new Array();

   <!-- IF S_USER_PM_POPUP -->
      if ({S_NEW_PM})
      {
         var url = '{UA_POPUP_PM}';
         window.open(url.replace(/&amp;/g, '&'), '_phpbbprivmsg', 'height=225,resizable=yes,scrollbars=yes, width=400');
      }
   <!-- ENDIF -->

   /**
   * Find a member
   */
   function find_username(url)
   {
      popup(url, 760, 570, '_usersearch');
      return false;
   }

   /**
   * New function for handling multiple calls to window.onload and window.unload by pentapenguin
   */
   window.onload = function()
   {
      for (var i = 0; i < onload_functions.length; i++)
      {
         eval(onload_functions[i]);
      }
   }

   window.onunload = function()
   {
      for (var i = 0; i < onunload_functions.length; i++)
      {
         eval(onunload_functions[i]);
      }
   }

// ]]>
</script>
<script type="text/javascript" src="{T_TEMPLATE_PATH}/styleswitcher.js"></script>
<script type="text/javascript" src="{T_TEMPLATE_PATH}/forum_fn.js"></script>

<link href="{T_THEME_PATH}/print.css" rel="stylesheet" type="text/css" media="print" title="printonly" />
<link href="{T_STYLESHEET_LINK}" rel="stylesheet" type="text/css" media="screen, projection" />

<link href="{T_THEME_PATH}/normal.css" rel="stylesheet" type="text/css" title="A" />
<link href="{T_THEME_PATH}/medium.css" rel="alternate stylesheet" type="text/css" title="A+" />
<link href="{T_THEME_PATH}/large.css" rel="alternate stylesheet" type="text/css" title="A++" />

<!-- IF S_CONTENT_DIRECTION eq 'rtl' -->
   <link href="{T_THEME_PATH}/bidi.css" rel="stylesheet" type="text/css" media="screen, projection" />
<!-- ENDIF -->





<!-- INCLUDE gallery/plugins_header.html -->
<!-- INCLUDE ads/ads.js -->
</head>

<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">

<div id="wrap">
   <a id="top" name="top" accesskey="t"></a>
   <div id="page-header">
         {ADS_1}
<span class="preload1"></span>
<span class="preload2"></span>
         
<ul id="nav">
   <li class="top"><a href="http://anivera.com" id="homepage" class="top_link"><span class="down">AniVera</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
      <!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">
<li><b>AniVera Community</b></li>
<li><a href="http://anivera.com/forum">Portal</a></li>
<li><a href="http://anivera.com/forum/index.php">Forum</a></li>
<li><a href="http://anivera.com/forum/gallery/index.php">Gallery</a></li>         
<li><a href="http://anivera.com/forum/chat/index.php">Ajax Chat</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>
<li class="top"><a href="http://myajito.com" id="myajito" class="top_link"><span class="down">MyAjito</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">
<li><b>MyAjito Community</b></li>
<li><a href="http://myajito.com/main">Main Portal</a></li>
<li><a href="http://img.myajito.com">Image Board</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>
<li class="top"><a href="http://anivera.com/forum/contact.php" id="contacts" class="top_link"><span class="down">Contacts Us!</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">
<li><b>Contacts</b></li>
<li><a href="http://anivera.com/forum/contact.php">Contacts</a></li>
<li><a href="mailto:vantoria@live.com.my">E-Mail Admin</a></li>

      </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

      <div class="headerbar">
         <div class="inner"><span class="corners-top"><span></span></span>

         <div id="site-description">
            <a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
            <p>{SITE_DESCRIPTION}</p>
            <p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
         </div>

         <span class="corners-bottom"><span></span></span></div>
      </div>



<!-- IF not $S_IN_PORTAL or not S_DISPLAY_MAINMENU -->
<div class="navbar">
         <div class="inner"><span class="corners-top"><span></span></span>

<ul class="linklist navlinks">
<li class="icon-home"><a href="http://anivera.com/forum/" title="AniVera Portal">Portal</a></li>
<!-- IF S_SHOW_HOMEPAGE and U_HOMEPAGE -->
<li class="icon-home"><a href="{U_PORTAL}">{L_PORTAL}</a> &#187;  <a href="{U_HOMEPAGE}" <!-- IF U_HOMEPAGE_TITLE -->title="{U_HOMEPAGE_TITLE}"<!-- ENDIF -->
<!-- IF S_SHOW_HOMEPAGE_IN_NEW -->onclick="window.open(this.href); return false;"<!-- ENDIF --> accesskey="y">{L_HOMEPAGE}</a></li><!-- ENDIF -->
<li class="icon-home"><a href="{U_INDEX}" accesskey="h">{L_INDEX}</a> <!-- BEGIN navlinks --> <strong>&#8249;</strong> <a href="{navlinks.U_VIEW_FORUM}">{navlinks.FORUM_NAME}</a><!-- END navlinks --></li>


<li class="icon-home"><a href="http://myajito.com/" target="_blank" title="MyAjito Portal">MyAjito Portal</a></li>

            <li class="rightside"><a href="#" onclick="fontsizeup(); return false;" onkeypress="fontsizeup(); return false;" class="fontsize" title="{L_CHANGE_FONT_SIZE}">{L_CHANGE_FONT_SIZE}</a></li>

            <!-- IF U_EMAIL_TOPIC --><li class="rightside"><a href="{U_EMAIL_TOPIC}" title="{L_EMAIL_TOPIC}" class="sendemail">{L_EMAIL_TOPIC}</a></li><!-- ENDIF -->
            <!-- IF U_EMAIL_PM --><li class="rightside"><a href="{U_EMAIL_PM}" title="{L_EMAIL_PM}" class="sendemail">{L_EMAIL_PM}</a></li><!-- ENDIF -->
            <!-- IF U_PRINT_TOPIC --><li class="rightside"><a href="{U_PRINT_TOPIC}" title="{L_PRINT_TOPIC}" accesskey="p" class="print">{L_PRINT_TOPIC}</a></li><!-- ENDIF -->
            <!-- IF U_PRINT_PM --><li class="rightside"><a href="{U_PRINT_PM}" title="{L_PRINT_PM}" accesskey="p" class="print">{L_PRINT_PM}</a></li><!-- ENDIF -->
         </ul>


         <!-- IF not S_USER_LOGGED_IN and not S_IS_BOT and S_LOGIN_ANYWHERE and not AUTO_REFRESH -->
         <form method="post" action="{S_LOGIN_ANYWHERE}" style="float:left;position:relative;">
            <fieldset class="quick-login" style="float:left;position:relative;white-space:nowrap">
               <label for="prime_login_username">{L_USERNAME}:</label>&nbsp;<input tabindex="100" type="text" name="username" id="prime_login_username" size="10" class="inputbox" style="min-width:100px" title="{L_USERNAME}" /> 
               <label for="prime_login_password">{L_PASSWORD}:</label>&nbsp;<input tabindex="101" type="password" name="password" id="prime_login_password" size="10" class="inputbox" title="{L_PASSWORD}" />
               <!-- IF S_AUTOLOGIN_ENABLED --><label for="prime_login_autologin"><input tabindex="102" type="checkbox" name="autologin" id="prime_login_autologin" /> {L_PRIME_REMEMBER_ME}</label><!-- ENDIF -->
               <input tabindex="103" type="submit" name="login" value="{L_LOGIN}" class="button2" />
            </fieldset>
         </form>
         <!-- ENDIF -->
         <!-- 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;
                          <!-- IF SIMPLE_COMMENT_ENABLED --><a href="{U_COMMENTS}">({L_TOTAL_COMMENT})</a><!-- ENDIF -->
               <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><a href="http://anivera.com/forum/chat/index.php" target="_blank" title="AJAX Chat">Chat</a></li>
<!-- IF S_DISPLAY_SEARCH --><li class="icon-search"><a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH}</a></li><!-- ENDIF -->
<li class="icon-gallery"><a href="{U_GALLERY_MOD}" title="{L_GALLERY_EXPLAIN}">{L_GALLERY}</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 S_DISPLAY_THANKSLIST --><li class="icon-thanks"><a href="{U_THANKSLIST}" title="{L_THANKS_USER}">{L_GRATITUDES}</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>

         <span class="corners-bottom"><span></span></span></div>
      </div>
<!-- ENDIF -->

   </div>
   <!-- IF ADS_2 -->
   <br />
   <div class="forabg">
      <div class="inner"><span class="corners-top"><span></span></span>
         <ul class="topiclist">
            <li class="header">
               <dl class="icon">
                  <dt>{L_ADVERTISEMENT}</dt>
               </dl>
            </li>
         </ul>
         <div style="padding: 5px 5px 2px 5px; font-size: 1.1em; background-color: #ECF1F3; margin: 0px auto; text-align: center;">
            {ADS_2}
         </div>
      <span class="corners-bottom"><span></span></span></div>
   </div>
   <!-- ENDIF -->
   <a name="start_here"></a>
   <div id="page-body">
      
       <!-- IF S_BOARD_DISABLED and S_USER_LOGGED_IN and (U_MCP or U_ACP) -->
      <div id="message" class="rules">
         <div class="inner"><span class="corners-top"><span></span></span>
<strong>{L_INFORMATION}:</strong> {L_BOARD_DISABLED}
         <span class="corners-bottom"><span></span></span></div>
      </div>
      <!-- ENDIF -->
<!-- INCLUDE announcement_centre.html -->


There's some plugin in it... so.. it looks a bit messy.

the problem now is... please take a look at the attchment below. When i veiw it in IE it looks like attachement 1.
When i open in firefox it looks my attachment 2.
And the old navigation bar of the forum, which i wanted it to be there,
the logout button, the index, etc etc. are gone.
Further more the style... look strange.
Please take a look. Help are appreciated.
Attachments
2.jpg
1.jpg
vantoria
Crewman
Crewman
 
Posts: 2
Joined: 26 Apr 2009, 23:14
Gender: Male
phpBB Knowledge: 1

Re: [HOW TO] Integrate a CSS dropdown Menu into phpBB Styles

Postby Howard » 09 Dec 2009, 09:39

Excellent tutorial worked a treat!! Many thanks :D
"Man's proper stature is not one of mediocrity, failure, frustration, or defeat, but one of achievement, strength, and nobility. In short, man can and ought to be a hero." - Mike Menzter
User avatar
Howard    
Supporter
Supporter
 
Posts: 60
Joined: 18 May 2008, 15:30
Location: UK - Suffolk
Favorite Team: Rugby: London Wasps
Gender: Male
phpBB Knowledge: 3

Re: [HOW TO] Integrate a CSS dropdown Menu into phpBB Styles

Postby lovelysummer » 19 Jan 2010, 05:42

Hello ,

I need a small help . I would like to have a delay function in the drop down so as to avoid the mouse roll over it accidentially the drop down drops at once. For an example, when the pointer point to the menu have 1 second delay drop down.

Anybody can help me ?

Thanks :)
lovelysummer
Cadet I
Cadet I
 
Posts: 11
Joined: 23 May 2009, 07:31
Gender: Male
phpBB Knowledge: 1

Re: [HOW TO] Integrate a CSS dropdown Menu into phpBB Styles

Postby wired076 » 24 Jan 2010, 05:47

lovelysummer wrote:Hello ,

I need a small help . I would like to have a delay function in the drop down so as to avoid the mouse roll over it accidentially the drop down drops at once. For an example, when the pointer point to the menu have 1 second delay drop down.

Anybody can help me ?

Thanks :)


I think that if you were to do this users would not then end up seeing the drop down menus as they would not know about needing to keep the mouse on the nav item.
I.T. Construct
STG Supporter
Please contact me via email/im for help at reasonable prices.
USA Based Web hosting
email: admin@itconstruct.com.au
- Visit http://www.itconstruct.com.au
wired076    
Supporter
Supporter
 
Posts: 494
Joined: 03 Feb 2009, 16:51
Location: Australia
Gender: Male
phpBB Knowledge: 5

Re: [HOW TO] Integrate a CSS dropdown Menu into phpBB Styles

Postby v01d » 25 Jan 2010, 22:13

If someone could please get this to work with this theme that'd be great.


http://demo.phpbb3styles.net/index.php?style=446
v01d
Crewman
Crewman
 
Posts: 8
Joined: 16 Dec 2008, 19:40
Gender: Male

Re: [HOW TO] Integrate a CSS dropdown Menu into phpBB Styles

Postby Drak » 27 Feb 2010, 23:30

Thanks for this, fantastic tutorial!
Image Online Gaming Community
Build: phpBB 3.0.10 + Kiss Portal Engine
Drak
Borg Drone
Borg Drone
 
Posts: 29
Joined: 28 Jun 2007, 09:14
Location: Virginia
Favorite Team: Pittsburgh Penguins
Gender: Male

PreviousNext

Return to Tutorials and How-Tos

Who is online

Users browsing this forum: Google Adsense [Bot] and 11 guests