The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

navbar drop down for Phpbb2

5 posters

Go down

Solved navbar drop down for Phpbb2

Post by ketan_ 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_
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 May 24th 2011, 9:39 am

Me aswell please Smile
shawn.m
shawn.m
Forumember

Male Posts : 365
Reputation : 1
Language : English

http://modifiedcarroom.com/

Back to top Go down

Solved Re: navbar drop down for Phpbb2

Post by kirk 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
kirk
Forumaster

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

Back to top Go down

Solved Re: navbar drop down for Phpbb2

Post by E-Mark 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:


Last edited by mark1111 on May 25th 2011, 1:22 am; edited 1 time in total
E-Mark
E-Mark
Active Poster

Male Posts : 1412
Reputation : 169
Language : English
Location : Bitcoin

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

Back to top Go down

Solved Re: navbar drop down for Phpbb2

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

shawn.m
shawn.m
Forumember

Male Posts : 365
Reputation : 1
Language : English

http://modifiedcarroom.com/

Back to top Go down

Solved Re: navbar drop down for Phpbb2

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

Im Using Phpbb2, tutorial from Mark why not work?
ketan_
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 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
E-Mark
Active Poster

Male Posts : 1412
Reputation : 169
Language : English
Location : Bitcoin

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

Back to top Go down

Solved Re: navbar drop down for Phpbb2

Post by ketan_ 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_
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 May 25th 2011, 5:44 am

In your HTML Pages Management or try in webs.com Razz .
E-Mark
E-Mark
Active Poster

Male Posts : 1412
Reputation : 169
Language : English
Location : Bitcoin

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

Back to top Go down

Solved Re: navbar drop down for Phpbb2

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

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

not work... im stupid... navbar drop down for Phpbb2 Naughty

but Thanks Mark... Very good
ketan_
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 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
E-Mark
Active Poster

Male Posts : 1412
Reputation : 169
Language : English
Location : Bitcoin

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

Back to top Go down

Solved Re: navbar drop down for Phpbb2

Post by ketan_ 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:
ketan_
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 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
E-Mark
Active Poster

Male Posts : 1412
Reputation : 169
Language : English
Location : Bitcoin

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

Back to top Go down

Solved Re: navbar drop down for Phpbb2

Post by ketan_ 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_
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 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
kirk
Forumaster

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

Back to top Go down

Solved Re: navbar drop down for Phpbb2

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

how a bout my problem? Crying or Very sad
ketan_
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 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
kirk
Forumaster

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

Back to top Go down

Solved Re: navbar drop down for Phpbb2

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

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

Thanks
ketan_
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_ May 26th 2011, 11:12 am

Help me... center my navigation menu.... Sad
ketan_
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 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
kirk
Forumaster

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

Back to top Go down

Solved Re: navbar drop down for Phpbb2

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

Mad confused.....

edit : :wouhou: Resolved..... Thanks Thanks Thanks...
ketan_
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 May 27th 2011, 5:51 am

Since this thread appears to be solved, I will lock this thread and mark it as solved.
navbar drop down for Phpbb2 2j4t5a8

Sanket Smile

Sanket
Sanket
ForumGuru

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

Back to top Go down

Back to top

- Similar topics

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