The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

navbar drop down for Phpbb2

View previous topic View next topic Go down

Solved navbar drop down for Phpbb2

Post by ketan_ on May 24th 2011, 9:20 am

Help me to create Navigation Bar Drop Down Menu...Please give Me Tutorial, HTML,CSS anda JS...

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

Male Posts : 142
Reputation : 1
Language : Indonesia
Location : Indonesian

Back to top Go down

Solved Re: navbar drop down for Phpbb2

Post by shawn.m on May 24th 2011, 9:39 am

Me aswell please Smile

shawn.m
Forumember

Male Posts : 365
Reputation : 0
Language : English

http://modifiedcarroom.com/

Back to top Go down

Solved Re: navbar drop down for Phpbb2

Post by kirk on May 24th 2011, 3:33 pm

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



kirk
Forumaster

Male Posts : 11037
Reputation : 651
Language : English,Vulcan,Klingon, Romulan,& Gorn

Back to top Go down

Solved Re: navbar drop down for Phpbb2

Post by E-Mark on May 24th 2011, 4:57 pm

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 .

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 Very Happy .
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

E-Mark
Active Poster

Male Posts : 1389
Reputation : 164
Language : English, Tagalog
Location : Republic of the Philippines

http://coding-spot.darkbb.com/

Back to top Go down

Solved Re: navbar drop down for Phpbb2

Post by shawn.m on May 24th 2011, 5:21 pm


shawn.m
Forumember

Male Posts : 365
Reputation : 0
Language : English

http://modifiedcarroom.com/

Back to top Go down

Solved Re: navbar drop down for Phpbb2

Post by ketan_ on May 25th 2011, 5:17 am

Im Using Phpbb2, tutorial from Mark why not work?

ketan_
Forumember

Male Posts : 142
Reputation : 1
Language : Indonesia
Location : Indonesian

Back to top Go down

Solved Re: navbar drop down for Phpbb2

Post by E-Mark on May 25th 2011, 5:33 am

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 .

E-Mark
Active Poster

Male Posts : 1389
Reputation : 164
Language : English, Tagalog
Location : Republic of the Philippines

http://coding-spot.darkbb.com/

Back to top Go down

Solved Re: navbar drop down for Phpbb2

Post by ketan_ on May 25th 2011, 5:42 am

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

Male Posts : 142
Reputation : 1
Language : Indonesia
Location : Indonesian

Back to top Go down

Solved Re: navbar drop down for Phpbb2

Post by E-Mark on May 25th 2011, 5:44 am

In your HTML Pages Management or try in webs.com Razz .

E-Mark
Active Poster

Male Posts : 1389
Reputation : 164
Language : English, Tagalog
Location : Republic of the Philippines

http://coding-spot.darkbb.com/

Back to top Go down

Solved Re: navbar drop down for Phpbb2

Post by ketan_ on May 25th 2011, 5:57 am

mark1111 wrote:In your HTML Pages Management or try in webs.com Razz .

not work... im stupid...

but Thanks Mark... Very good

ketan_
Forumember

Male Posts : 142
Reputation : 1
Language : Indonesia
Location : Indonesian

Back to top Go down

Solved Re: navbar drop down for Phpbb2

Post by E-Mark on May 25th 2011, 5:58 am

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 :
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 .

E-Mark
Active Poster

Male Posts : 1389
Reputation : 164
Language : English, Tagalog
Location : Republic of the Philippines

http://coding-spot.darkbb.com/

Back to top Go down

Solved Re: navbar drop down for Phpbb2

Post by ketan_ on May 25th 2011, 6:24 am

[quote="mark1111"]
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="http://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="http://illiweb.com/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

Male Posts : 142
Reputation : 1
Language : Indonesia
Location : Indonesian

Back to top Go down

Solved Re: navbar drop down for Phpbb2

Post by E-Mark on May 25th 2011, 6:54 am

Oh sorry, i forgot you use Phpbb2 .

Search this then delete :
Code:

<td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>

then replace with the HTML .

E-Mark
Active Poster

Male Posts : 1389
Reputation : 164
Language : English, Tagalog
Location : Republic of the Philippines

http://coding-spot.darkbb.com/

Back to top Go down

Solved Re: navbar drop down for Phpbb2

Post by ketan_ on May 25th 2011, 7:11 am

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


ketan_
Forumember

Male Posts : 142
Reputation : 1
Language : Indonesia
Location : Indonesian

Back to top Go down

Solved Re: navbar drop down for Phpbb2

Post by kirk on May 25th 2011, 4:00 pm


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

Male Posts : 11037
Reputation : 651
Language : English,Vulcan,Klingon, Romulan,& Gorn

Back to top Go down

Solved Re: navbar drop down for Phpbb2

Post by ketan_ on May 25th 2011, 4:43 pm

how a bout my problem? Crying or Very sad

ketan_
Forumember

Male Posts : 142
Reputation : 1
Language : Indonesia
Location : Indonesian

Back to top Go down

Solved Re: navbar drop down for Phpbb2

Post by kirk on May 26th 2011, 4:13 am

@ketan_ wrote:how a bout my problem? Crying or Very sad

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

Male Posts : 11037
Reputation : 651
Language : English,Vulcan,Klingon, Romulan,& Gorn

Back to top Go down

Solved Re: navbar drop down for Phpbb2

Post by ketan_ on May 26th 2011, 5:17 am

Please cek This My Forum
I Want Center Navigation Menu...

Thanks

ketan_
Forumember

Male Posts : 142
Reputation : 1
Language : Indonesia
Location : Indonesian

Back to top Go down

Solved Re: navbar drop down for Phpbb2

Post by ketan_ on May 26th 2011, 11:12 am

Help me... center my navigation menu.... Sad

ketan_
Forumember

Male Posts : 142
Reputation : 1
Language : Indonesia
Location : Indonesian

Back to top Go down

Solved Re: navbar drop down for Phpbb2

Post by kirk on May 26th 2011, 3:43 pm

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

kirk
Forumaster

Male Posts : 11037
Reputation : 651
Language : English,Vulcan,Klingon, Romulan,& Gorn

Back to top Go down

Solved Re: navbar drop down for Phpbb2

Post by ketan_ on May 27th 2011, 5:26 am

Mad confused.....

edit : :wouhou: Resolved..... Thanks Thanks Thanks...

ketan_
Forumember

Male Posts : 142
Reputation : 1
Language : Indonesia
Location : Indonesian

Back to top Go down

Solved Re: navbar drop down for Phpbb2

Post by Sanket on May 27th 2011, 5:51 am

Since this thread appears to be solved, I will lock this thread and mark it as solved.


Sanket Smile


Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum