navbar drop down for Phpbb2
5 posters
Page 1 of 1
navbar drop down for Phpbb2
Help me to create Navigation Bar Drop Down Menu...Please give Me Tutorial, HTML,CSS anda JS...
Thanks b4
Edit : sorry, Im using Phpbb2...
Thanks b4
Edit : sorry, Im using Phpbb2...
Last edited by ketan_ on May 24th 2011, 9:47 am; edited 1 time in total
ketan_- Forumember
- Posts : 142
Reputation : 1
Language : Indonesia
Location : Indonesian
Re: navbar drop down for Phpbb2
Did yous have a paticular one in mind, there are several scripts codes out there, or you could even get into creating like a spry menue type.
I am not sure how it would have to be done with phpbb3.. i guess what ever coding would have to be added to your general announcement,
As far as phpbb3 or punbb then it can be added in you tempates..
But then leads to the first question again.. what kind do you want and are you useing any sort of coding you found to create one.
Here are a couple examples.. this is noting fancy but good for a demo for two types.
So on the left hand side you have a more advanced spry menue type,
(created with dreamweaver)
then on the right hand side you have a smaller more simple drop down menue.
These are just two that i use, but there are many different ways and other scripts out there you can find to set them up.
http://www.forumsuccessors.com/h109-spry-drop-down-test-2
I am not sure how it would have to be done with phpbb3.. i guess what ever coding would have to be added to your general announcement,
As far as phpbb3 or punbb then it can be added in you tempates..
But then leads to the first question again.. what kind do you want and are you useing any sort of coding you found to create one.
Here are a couple examples.. this is noting fancy but good for a demo for two types.
So on the left hand side you have a more advanced spry menue type,
(created with dreamweaver)
then on the right hand side you have a smaller more simple drop down menue.
These are just two that i use, but there are many different ways and other scripts out there you can find to set them up.
http://www.forumsuccessors.com/h109-spry-drop-down-test-2
kirk- Forumaster
- Posts : 11037
Reputation : 653
Language : English,Vulcan,Klingon, Romulan,& Gorn
Re: navbar drop down for Phpbb2
http://www.noupe.com/tutorial/drop-down-menu-jquery-css.html
Here, it's just easy .
1. The HTML, put this wherever you want, it will still work .
2. The CSS, put this on CSS Stylesheet
NOTE : Just replace this 3 with your own image .
- topnav_hover.gif
- subnav_btn.gif
- dropdown_linkbg.gif
3. The jQuery, just host this then it will work .
After hosting, use this code :
That's all .
Note : Put the jQuery under the HTML codes above . Here's how it will work :
Here, it's just easy .
1. The HTML, put this wherever you want, it will still work .
- Code:
<ul class="topnav">
<li><a href="#">Home</a></li>
<li>
<a href="#">Tutorials</a>
<ul class="subnav">
<li><a href="#">Sub Nav Link</a></li>
<li><a href="#">Sub Nav Link</a></li>
</ul>
</li>
<li>
<a href="#">Resources</a>
<ul class="subnav">
<li><a href="#">Sub Nav Link</a></li>
<li><a href="#">Sub Nav Link</a></li>
</ul>
</li>
<li><a href="#">About Us</a></li>
<!-- BEGIN switch_user_logged_in -->
<li><a href="/groups">Usergroups</a></li>
<li><a href="/profile?mode=editprofile">Profile</a></li>
<li><a href="/privmsg?folder=inbox" class="p-m">Mailbox</a></li>
<li><a href="/login?logout">Logout</a></li>
<!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_logged_out -->
<li><a href="/register">Register</a></li>
<li><a href="/login">Login</a></li>
<!-- END switch_user_logged_out -->
</ul>
2. The CSS, put this on CSS Stylesheet
NOTE : Just replace this 3 with your own image .
- topnav_hover.gif
- subnav_btn.gif
- dropdown_linkbg.gif
- Code:
#pun-head #pun-navlinks {
list-style: none;
padding: 0 20px;
margin: 0;
float: left;
width: 842px;
background: #222;
font-size: 1.0em;
background: url('http://www.sohtanaka.com/web-design/examples/drop-down-menu/topnav_bg.gif') repeat-x;
}
ul.topnav li {
float: left;
margin: 0;
padding: 0 15px 0 0;
position: relative; /*--Declare X and Y axis base for sub navigation--*/
}
ul.topnav li a{
padding: 10px 5px;
color: #fff;
display: block;
text-decoration: none;
float: left;
}
ul.topnav li a:hover{
background: url('http://www.sohtanaka.com/web-design/examples/drop-down-menu/topnav_hover.gif') no-repeat center top;
}
ul.topnav li span { /*--Drop down trigger styles--*/
width: 17px;
height: 35px;
float: left;
background: url('http://www.sohtanaka.com/web-design/examples/drop-down-menu/subnav_btn.gif') no-repeat center top;
}
ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/
ul.topnav li ul.subnav {
list-style: none;
position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
left: 0; top: 35px;
background: #333;
margin: 0; padding: 0;
display: none;
float: left;
width: 170px;
border: 1px solid #111;
}
ul.topnav li ul.subnav li{
margin: 0; padding: 0;
border-top: 1px solid #252525; /*--Create bevel effect--*/
border-bottom: 1px solid #444; /*--Create bevel effect--*/
clear: both;
width: 170px;
}
html ul.topnav li ul.subnav li a {
float: left;
width: 145px;
background: #333 url('http://www.sohtanaka.com/web-design/examples/drop-down-menu/dropdown_linkbg.gif') no-repeat 10px center;
padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
background: #222 url('http://www.sohtanaka.com/web-design/examples/drop-down-menu/dropdown_linkbg.gif') no-repeat 10px center;
}
3. The jQuery, just host this then it will work .
- Code:
$(document).ready(function(){
$("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*)
$("ul.topnav li span").click(function() { //When trigger is clicked...
//Following events are applied to the subnav itself (moving subnav up and down)
$(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click
$(this).parent().hover(function() {
}, function(){
$(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
});
//Following events are applied to the trigger (Hover events for the trigger)
}).hover(function() {
$(this).addClass("subhover"); //On hover over, add class "subhover"
}, function(){ //On Hover Out
$(this).removeClass("subhover"); //On hover out, remove class "subhover"
});
});
After hosting, use this code :
- Code:
<script src="JUST PUT HERE THE LINK OF THE SCRIPT" type="text/javascript"></script>
That's all .
Note : Put the jQuery under the HTML codes above . Here's how it will work :
- Spoiler:
- Code:
<ul class="topnav">
<li><a href="#">Home</a></li>
<li>
<a href="#">Tutorials</a>
<ul class="subnav">
<li><a href="#">Sub Nav Link</a></li>
<li><a href="#">Sub Nav Link</a></li>
</ul>
</li>
<li>
<a href="#">Resources</a>
<ul class="subnav">
<li><a href="#">Sub Nav Link</a></li>
<li><a href="#">Sub Nav Link</a></li>
</ul>
</li>
<li><a href="#">About Us</a></li>
<li><a href="#">Advertise</a></li>
<li><a href="#">Submit</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<script src="JUST PUT HERE THE LINK OF THE SCRIPT" type="text/javascript"></script>
Last edited by mark1111 on May 25th 2011, 1:22 am; edited 1 time in total
Re: navbar drop down for Phpbb2
How can i add this one http://www.forumsuccessors.com/h109-spry-drop-down-test-2
Re: navbar drop down for Phpbb2
Im Using Phpbb2, tutorial from Mark why not work?
ketan_- Forumember
- Posts : 142
Reputation : 1
Language : Indonesia
Location : Indonesian
Re: navbar drop down for Phpbb2
Edit the CSS :
- topnav_hover.gif
- subnav_btn.gif
- dropdown_linkbg.gif
Here's the CSS of Sohtanaka .
Note : THIS BELONGS TO SOHTANAKA .
and host the jQuery .
- topnav_hover.gif
- subnav_btn.gif
- dropdown_linkbg.gif
Here's the CSS of Sohtanaka .
Note : THIS BELONGS TO SOHTANAKA .
- Code:
ul.topnav {
list-style: none;
padding: 0 20px;
margin: 0;
float: left;
width: 920px;
background: #222;
font-size: 1.2em;
background: url(http://www.sohtanaka.com/web-design/examples/drop-down-menu/topnav_bg.gif) repeat-x;
}
ul.topnav li {
float: left;
margin: 0;
padding: 0 15px 0 0;
position: relative; /*--Declare X and Y axis base for sub navigation--*/
}
ul.topnav li a{
padding: 10px 5px;
color: #fff;
display: block;
text-decoration: none;
float: left;
}
ul.topnav li a:hover{
background: url(http://www.sohtanaka.com/web-design/examples/drop-down-menu/topnav_bg.gif) no-repeat center top;
}
ul.topnav li span { /*--Drop down trigger styles--*/
width: 17px;
height: 35px;
float: left;
background: url(http://www.sohtanaka.com/web-design/examples/drop-down-menu/subnav_btn.gif) no-repeat center top;
}
ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/
ul.topnav li ul.subnav {
list-style: none;
position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
left: 0; top: 35px;
background: #333;
margin: 0; padding: 0;
display: none;
float: left;
width: 170px;
border: 1px solid #111;
}
ul.topnav li ul.subnav li{
margin: 0; padding: 0;
border-top: 1px solid #252525; /*--Create bevel effect--*/
border-bottom: 1px solid #444; /*--Create bevel effect--*/
clear: both;
width: 170px;
}
html ul.topnav li ul.subnav li a {
float: left;
width: 145px;
background: #333 url(http://www.sohtanaka.com/web-design/examples/drop-down-menu/dropdown_linkbg.gif) no-repeat 10px center;
padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
background: #222 url(http://www.sohtanaka.com/web-design/examples/drop-down-menu/dropdown_linkbg.gif) no-repeat 10px center;
}
and host the jQuery .
Re: navbar drop down for Phpbb2
mark1111 wrote:Edit the CSS :
- topnav_hover.gif
- subnav_btn.gif
- dropdown_linkbg.gif
Here's the CSS of Sohtanaka .
Note : THIS BELONGS TO SOHTANAKA .
- Code:
ul.topnav {
list-style: none;
padding: 0 20px;
margin: 0;
float: left;
width: 920px;
background: #222;
font-size: 1.2em;
background: url(http://www.sohtanaka.com/web-design/examples/drop-down-menu/topnav_bg.gif) repeat-x;
}
ul.topnav li {
float: left;
margin: 0;
padding: 0 15px 0 0;
position: relative; /*--Declare X and Y axis base for sub navigation--*/
}
ul.topnav li a{
padding: 10px 5px;
color: #fff;
display: block;
text-decoration: none;
float: left;
}
ul.topnav li a:hover{
background: url(http://www.sohtanaka.com/web-design/examples/drop-down-menu/topnav_bg.gif) no-repeat center top;
}
ul.topnav li span { /*--Drop down trigger styles--*/
width: 17px;
height: 35px;
float: left;
background: url(http://www.sohtanaka.com/web-design/examples/drop-down-menu/subnav_btn.gif) no-repeat center top;
}
ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/
ul.topnav li ul.subnav {
list-style: none;
position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
left: 0; top: 35px;
background: #333;
margin: 0; padding: 0;
display: none;
float: left;
width: 170px;
border: 1px solid #111;
}
ul.topnav li ul.subnav li{
margin: 0; padding: 0;
border-top: 1px solid #252525; /*--Create bevel effect--*/
border-bottom: 1px solid #444; /*--Create bevel effect--*/
clear: both;
width: 170px;
}
html ul.topnav li ul.subnav li a {
float: left;
width: 145px;
background: #333 url(http://www.sohtanaka.com/web-design/examples/drop-down-menu/dropdown_linkbg.gif) no-repeat 10px center;
padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
background: #222 url(http://www.sohtanaka.com/web-design/examples/drop-down-menu/dropdown_linkbg.gif) no-repeat 10px center;
}
and host the jQuery .
Where is im host the jQuery on other hosting or in forumotion?
ketan_- Forumember
- Posts : 142
Reputation : 1
Language : Indonesia
Location : Indonesian
Re: navbar drop down for Phpbb2
mark1111 wrote:In your HTML Pages Management or try in webs.com .
not work... im stupid...
but Thanks Mark...
ketan_- Forumember
- Posts : 142
Reputation : 1
Language : Indonesia
Location : Indonesian
Re: navbar drop down for Phpbb2
Wait i'll give the full details .
I'll just edit this post . Give me 5 minutes .
EDIT : Ok here's how it will work .
EDIT 2 : Please copy again the CSS, i just edit it so it will work on all version .
Go to ACP > Display > Templates > General > overall_header
Find this and delete :
Then replace it with this HTML :
2. The CSS, put this on CSS Stylesheet
NOTE : Images belongs to SOHTANAKA
That's all it will work now .
I'll just edit this post . Give me 5 minutes .
EDIT : Ok here's how it will work .
EDIT 2 : Please copy again the CSS, i just edit it so it will work on all version .
Go to ACP > Display > Templates > General > overall_header
Find this and delete :
- Code:
<div id="pun-head">
<div id="pun-navlinks">
<ul class="clearfix">
<li>{GENERATED_NAV_BAR}</li>
</ul>
</div>
</div>
Then replace it with this HTML :
- Code:
<ul class="topnav">
<li><a href="#">Home</a></li>
<li>
<a href="#">Tutorials</a>
<ul class="subnav">
<li><a href="#">Sub Nav Link</a></li>
<li><a href="#">Sub Nav Link</a></li>
</ul>
</li>
<li>
<a href="#">Resources</a>
<ul class="subnav">
<li><a href="#">Sub Nav Link</a></li>
<li><a href="#">Sub Nav Link</a></li>
</ul>
</li>
<li><a href="#">About Us</a></li>
<!-- BEGIN switch_user_logged_in -->
<li><a href="/groups">Usergroups</a></li>
<li><a href="/profile?mode=editprofile">Profile</a></li>
<li><a href="/privmsg?folder=inbox" class="p-m">Mailbox</a></li>
<li><a href="/login?logout">Logout</a></li>
<!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_logged_out -->
<li><a href="/register">Register</a></li>
<li><a href="/login">Login</a></li>
<!-- END switch_user_logged_out -->
</ul>
<script src="http://showtime-ragnarok.webs.com/s.txt" type="text/javascript"></script>
2. The CSS, put this on CSS Stylesheet
NOTE : Images belongs to SOHTANAKA
- Code:
ul.topnav {
list-style: none;
padding: 0 20px;
margin: 0;
float: left;
width: 920px;
background: #222;
font-size: 1.2em;
background: url(http://www.sohtanaka.com/web-design/examples/drop-down-menu/topnav_bg.gif) repeat-x;
}
ul.topnav li {
float: left;
margin: 0;
padding: 0 15px 0 0;
position: relative; /*--Declare X and Y axis base for sub navigation--*/
}
ul.topnav li a{
padding: 10px 5px;
color: #fff;
display: block;
text-decoration: none;
float: left;
}
ul.topnav li a:hover{
background: url(http://www.sohtanaka.com/web-design/examples/drop-down-menu/topnav_bg.gif) no-repeat center top;
}
ul.topnav li span { /*--Drop down trigger styles--*/
width: 17px;
height: 35px;
float: left;
background: url(http://www.sohtanaka.com/web-design/examples/drop-down-menu/subnav_btn.gif) no-repeat center top;
}
ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/
ul.topnav li ul.subnav {
list-style: none;
position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
left: 0; top: 35px;
background: #333;
margin: 0; padding: 0;
display: none;
float: left;
width: 170px;
border: 1px solid #111;
}
ul.topnav li ul.subnav li{
margin: 0; padding: 0;
border-top: 1px solid #252525; /*--Create bevel effect--*/
border-bottom: 1px solid #444; /*--Create bevel effect--*/
clear: both;
width: 170px;
}
html ul.topnav li ul.subnav li a {
float: left;
width: 145px;
background: #333 url(http://www.sohtanaka.com/web-design/examples/drop-down-menu/dropdown_linkbg.gif) no-repeat 10px center;
padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
background: #222 url(http://www.sohtanaka.com/web-design/examples/drop-down-menu/dropdown_linkbg.gif) no-repeat 10px center;
}
That's all it will work now .
Re: navbar drop down for Phpbb2
[quote="mark1111"]
Go to ACP > Display > Templates > General > overall_header
Find this and delete :
in my Overall_header nothing this code.....
This my Overall_header :
Go to ACP > Display > Templates > General > overall_header
Find this and delete :
- Code:
<div id="pun-head">
<div id="pun-navlinks">
<ul class="clearfix">
<li>{GENERATED_NAV_BAR}</li>
</ul>
</div>
</div>
in my Overall_header nothing this code.....
This my Overall_header :
- Spoiler:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB}>
<head>
<!-- BEGIN meta_emulate_ie7 -->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<!-- END meta_emulate_ie7 -->
<title>{SITENAME_TITLE}{PAGE_TITLE}</title>
<meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING};" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />
<!-- BEGIN switch_canonical_url -->
<link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
<!-- END switch_canonical_url -->
{META_FAVICO}
{META}
{META_FB_LIKE}
<meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
{T_HEAD_STYLESHEET}
{CSS}
<link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
<link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
<script src="{JQUERY_PATH}" type="text/javascript"></script>
<script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>
<!-- BEGIN switch_fb_login -->
<script src="https://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
<script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
<!-- END switch_fb_login -->
<!-- BEGIN switch_ticker -->
<link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" />
<script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>
<!-- END switch_ticker -->
<!-- BEGIN switch_ticker_new -->
<script src="{JS_DIR}jquery/jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
<script type="text/javascript">//<![CDATA[
/* Definir le sens de direction en fonction du panneau admin */
var tickerDirParam = "{switch_ticker.DIRECTION}";
var slid_vert = false;
var auto_dir = 'next';
var h_perso = parseInt({switch_ticker.HEIGHT});
switch( tickerDirParam )
{
case 'top' :
slid_vert = true;
break;
case 'left':
break;
case 'bottom':
slid_vert = true;
auto_dir = 'prev';
break;
case 'right':
auto_dir = 'prev';
break;
default:
slid_vert = true;
}
$(document).ready(function() {
var w_cont = $('#fa_ticker_container').width();
if (w_cont > 0)
{
$('#fa_ticker_container').width(w_cont);
/* Affichage de la liste */
$('#fa_ticker_content').css('display','block');
/* Calcul des dimensions du conteneur et des éléments */
var width_max = $('ul#fa_ticker_content').width();
var width_item = Math.floor(width_max / {switch_ticker.SIZE});
var height_max = h_perso;
/* Calcul de la hauteur maximale du contenur en fonction des éléments et de la hauteur personnalisée dans l'admin */
$('ul#fa_ticker_content li').each( function () {
if ($(this).height() > height_max)
{
height_max = $(this).height();
}
} );
/* Redimensionnement des éléments et des images trop larges */
$('ul#fa_ticker_content li').width(width_item).height(height_max).find('img').each(function () {
if ($(this).width() > width_item)
{
var ratio = $(this).width() / width_item;
var new_height = Math.round($(this).height() / ratio);
$(this).height(new_height).width(width_item);
}
});
/* Redimensionnement et centrage du conteneur en mode vertical */
if (slid_vert)
{
$('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
}
/* Initialisation du caroussel */
$('#fa_ticker_content').jcarousel({
vertical: slid_vert,
wrap: 'circular',
auto: {switch_ticker.STOP_TIME},
auto_direction: auto_dir,
scroll: 1,
size: {switch_ticker.SIZE},
height_max: height_max,
animation: {switch_ticker.SPEED}
});
}
else
{
$('ul#fa_ticker_content li:not(:first)').css('display','none');
$('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center');
}
});
//]]>
</script>
<!-- END switch_ticker_new -->
<script type="text/javascript">//<![CDATA[
$(document).ready(function(){
<!-- BEGIN switch_enable_pm_popup -->
pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
pm.focus();
<!-- END switch_enable_pm_popup -->
<!-- BEGIN switch_report_popup -->
report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
report.focus();
<!-- END switch_report_popup -->
<!-- BEGIN switch_ticker -->
ticker_start({switch_ticker.HEIGHT}, {switch_ticker.SPACING}, {switch_ticker.SPEED}, '{switch_ticker.DIRECTION}', {switch_ticker.STOP_TIME});
<!-- END switch_ticker -->
});
<!-- BEGIN switch_login_popup -->
var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;
<!-- END switch_login_popup -->
<!-- BEGIN switch_login_popup -->
$(document).ready( function() {
$(window).resize(function() {
var windowWidth = document.documentElement.clientWidth;
var popupWidth = $("#login_popup").width();
var mypopup = $("#login_popup");
$("#login_popup").css({
"left": windowWidth/2 - popupWidth/2
});
});
});
<!-- END switch_login_popup -->
//]]>
</script>
{GREETING_POPUP}
<!-- BEGIN switch_ticker_new -->
<style>
.jcarousel-skin-tango .jcarousel-item {
text-align:center;
width: 10px;
}
.jcarousel-skin-tango .jcarousel-item-horizontal {
margin-right: {switch_ticker.SPACING}px;
}
.jcarousel-skin-tango .jcarousel-item-vertical {
margin-bottom: {switch_ticker.SPACING}px;
}
</style>
<!-- END switch_ticker_new -->
<!-- BEGIN google_analytics_code -->
<script type="text/javascript">
//<![CDATA[
var _gaq = _gaq || [];
_gaq.push(['_setAccount', '{G_ANALYTICS_ID}']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
//]]>
</script>
<!-- END google_analytics_code -->
</head>
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
<!-- BEGIN hitskin_preview -->
<div id="hitskin_preview" style="display: block;">
<h1><img src="https://2img.net/i/fa/hitskin/hitskin_logo.png" alt="" /> Hit<em>skin</em>.com</h1>
<div class="content">
<p>
{hitskin_preview.L_THEME_SITE_PREVIEW}
<br />
<span>{hitskin_preview.U_INSTALL_THEME}<a href="http://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
</p>
</div>
</div>
<!-- END hitskin_preview -->
<!-- BEGIN switch_login_popup -->
<div id="login_popup">
<table class="forumline" width="{LOGIN_POPUP_WIDTH}" height="{LOGIN_POPUP_HEIGHT}" border="0" cellspacing="1" cellpadding="0">
<tr height="25">
<td class="catLeft">
<span class="genmed module-title">{SITENAME}</span>
</td>
</tr>
<tr height="{LOGIN_POPUP_MSG_HEIGHT}">
<td class="row1" align="left" valign="top">
<div id="login_popup_buttons">
<form action="{S_LOGIN_ACTION}" method="get">
<input type="submit" class="mainoption" value="{L_LOGIN}" />
<input type="button" class="mainoption" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
<input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}" />
</form>
</div>
<span class="genmed">{LOGIN_POPUP_MSG}</span>
</td>
</tr>
</table>
</div>
<!-- END switch_login_popup -->
<a name="top"></a>
{JAVASCRIPT}
<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
<tr>
<td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
</tr>
</table>
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<!-- BEGIN switch_logo_left -->
<td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
<!-- END switch_logo_left -->
<td align="center" width="100%" valign="middle">
<!-- BEGIN switch_logo_center -->
<a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
<br />
<!-- END switch_logo_center -->
<div class="maintitle">{MAIN_SITENAME}</div>
<br />
<span class="gen">{SITE_DESCRIPTION}<br /> </span>
</td>
<!-- BEGIN switch_logo_right -->
<td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
<!-- END switch_logo_right -->
</tr>
</table>
<table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
<tr>
<td class="bodyline">
<div style="clear: both;"></div>
<!-- BEGIN switch_ticker_new -->
<div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
<tr>
<td {CLASS_TABLE_TYPE} align="left" class="row1">
<div id="fa_ticker_container">
<ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none;">
<!-- BEGIN ticker_row -->
<li>{switch_ticker.ticker_row.ELEMENT}</li>
<!-- END ticker_row -->
</ul>
</div>
</td>
</tr>
</table>
</div>
<!-- END switch_ticker_new -->
<!-- BEGIN switch_ticker -->
<div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
<tr>
<td {CLASS_TABLE_TYPE} align="left" class="row1">
<div id="fa_ticker_container">
<div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
<div class="fa_ticker_content">
<!-- BEGIN ticker_row -->
<div>{switch_ticker.ticker_row.ELEMENT}</div>
<!-- END ticker_row -->
</div>
</div>
</div>
</td>
</tr>
</table>
</div>
<!-- END switch_ticker -->
<div id="page-body">
<div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
<table cellpadding="0" cellspacing="0" width="100%" class="three-col">
<tbody>
<tr>
<td valign="top" width="100%">
<div id="center">
<!-- BEGIN giefmod_index1 -->
{giefmod_index1.MODVAR}
<!-- BEGIN saut -->
<div style="height:{SPACE_ROW}px"></div>
<!-- END saut -->
<!-- END giefmod_index1 -->
</div>
</td></tr><tr>
<td valign="top" width="100%">
<!-- BEGIN html_validation -->
</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
<!-- END html_validation -->
ketan_- Forumember
- Posts : 142
Reputation : 1
Language : Indonesia
Location : Indonesian
Re: navbar drop down for Phpbb2
Oh sorry, i forgot you use Phpbb2 .
Search this then delete :
then replace with the HTML .
Search this then delete :
- Code:
<td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
then replace with the HTML .
Re: navbar drop down for Phpbb2
Ok.. Its Work
But, I want Centered Navigation bar... how i put code <center></center> ????
Note : in DISPLAY - HEADERS & NAVIGATION - Menu position : is Center
why my navigation menu not center?
Thanks
But, I want Centered Navigation bar... how i put code <center></center> ????
Note : in DISPLAY - HEADERS & NAVIGATION - Menu position : is Center
why my navigation menu not center?
Thanks
ketan_- Forumember
- Posts : 142
Reputation : 1
Language : Indonesia
Location : Indonesian
Re: navbar drop down for Phpbb2
shawn.m wrote:How can i add this one http://www.forumsuccessors.com/h109-spry-drop-down-test-2
which one? the spy menu on the left, or the drop down bars on the right?
For the one on the left i created in Dreamweaver,
You can use the way mark has for the one above and that would work for you to set it up yourself that way,
Other then that you would need Dreamweaver to create one, or just give me the links,order you want them, the url of the page the menu going on, and any kind of image and or color you want it.
If you want the one on the right, then that’s easy i can give you the code and you can just add your own links in for as may as you want, it's pretty small compared to marks and my test spry..
See I am not sure if I can set up a way for others to just add links or not, I know I have to add the css to my java and also have to upload a separate java file to a java file host.. But I think I may have a way, not sure yet,
Hey you know Rono has a couple cool ones to that have easy directions to set up on the grounds of marks to.
kirk- Forumaster
- Posts : 11037
Reputation : 653
Language : English,Vulcan,Klingon, Romulan,& Gorn
Re: navbar drop down for Phpbb2
how a bout my problem?
ketan_- Forumember
- Posts : 142
Reputation : 1
Language : Indonesia
Location : Indonesian
Re: navbar drop down for Phpbb2
ketan_ wrote:how a bout my problem?
what did you use?
try this.. i dont know how big your nave bar is but place the whole code in here then add it where you have it.
without seeing what your using i dont know if align/div tags will work or not,
But this should do the trick.
- Code:
<html>
<head>
<meta http-equiv="content-type"
content="text/html; charset=ISO-8859-1">
<title></title>
</head>
<body style="color: rgb(0, 0, 0);" alink="" link=""
vlink="">
<table
style="text-align: left; margin-left: auto; margin-right: auto; width: 870px; height: 97px;"
border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="text-align: center; vertical-align: middle;">
PLACE YOUR CODE HERE
</td>
</tr>
</tbody>
</table>
<br>
</body>
</html>
if for some reason this dont work,
Then post your code and i will have to adjust it in dreamwever and get it right,
see how i had to do this one, this was to the left to, but then o opened with dream weaver and adjusted the tables in order to get it to align center.
Of course the borders will not be in there, this is just an example.. and depending on what you used it may have to be set different as well.
http://www.forumsuccessors.com/h101-center-spry-menue
kirk- Forumaster
- Posts : 11037
Reputation : 653
Language : English,Vulcan,Klingon, Romulan,& Gorn
ketan_- Forumember
- Posts : 142
Reputation : 1
Language : Indonesia
Location : Indonesian
Re: navbar drop down for Phpbb2
Help me... center my navigation menu....
ketan_- Forumember
- Posts : 142
Reputation : 1
Language : Indonesia
Location : Indonesian
Re: navbar drop down for Phpbb2
who's nav bar are you using mine or marks?
If your using mine it's not going to work by you copying it from the source...
You have to have a java file uploaded and there is also a css element that has to be added to the script.
If your using marks.. i am not sure i will have to try everything my self, or just wait for mark to reply.
Oh and what you meant was, you need it lined up in a row. not centered. sorry about the confusion,
please try to always be as specified as possible
If your using mine it's not going to work by you copying it from the source...
You have to have a java file uploaded and there is also a css element that has to be added to the script.
If your using marks.. i am not sure i will have to try everything my self, or just wait for mark to reply.
Oh and what you meant was, you need it lined up in a row. not centered. sorry about the confusion,
please try to always be as specified as possible
kirk- Forumaster
- Posts : 11037
Reputation : 653
Language : English,Vulcan,Klingon, Romulan,& Gorn
Re: navbar drop down for Phpbb2
confused.....
edit : Resolved..... Thanks Thanks Thanks...
edit : Resolved..... Thanks Thanks Thanks...
ketan_- Forumember
- Posts : 142
Reputation : 1
Language : Indonesia
Location : Indonesian
Re: navbar drop down for Phpbb2
Since this thread appears to be solved, I will lock this thread and mark it as solved.
Sanket
Sanket
Sanket- ForumGuru
- Posts : 48766
Reputation : 2830
Language : English
Location : Mumbai
Similar topics
» DROP DOWN NAVBAR FOR PHPBB2
» how to make drop down menu ? [phpbb2]
» Multi-Skin drop down for PHPBB2
» Invision drop down profile for PHPBB2
» Drop-down navbar
» how to make drop down menu ? [phpbb2]
» Multi-Skin drop down for PHPBB2
» Invision drop down profile for PHPBB2
» Drop-down navbar
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum