WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You

WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

Go to page : 1, 2  Next

View previous topic View next topic Go down  Message [Page 1 of 2]

1how to add down down menu in forumotion Empty how to add down down menu in forumotion Fri Dec 17, 2010 5:33 pm

blade99

blade99
Registered Member
Registered Member
can anybody teach me how to add down down menu like here
-->http://www.noupe.com/tutorial/drop-down-menu-jquery-css.html

i like it because it really rocks!Rock ON

http://dreamland.canadianforum.net/

ankillien

ankillien
Administrator
Administrator
Hi,

It requires template editing and some coding knowledge too.

You can add the CSS codes in your forum style sheet, javascript code goes before </head> in the overall_header template and the HTML code goes where you want the menu to appear.

blade99

blade99
Registered Member
Registered Member
i know coding but not really mastered because im just 1 year in forumotion but i didnt go in help forums since 8 months i just newly started in help forum sections.

http://dreamland.canadianforum.net/

ankillien

ankillien
Administrator
Administrator
You should at least know what HTML and CSS is and you should know how to add JavaScript to your page.

Do what I posted above and you get the menu to work. Rest the explanation is given on the tutorial page itself Very Happy

blade99

blade99
Registered Member
Registered Member
i know coding and html applying just give me the code...

http://dreamland.canadianforum.net/

ankillien

ankillien
Administrator
Administrator
The codes are already given here : http://www.noupe.com/tutorial/drop-down-menu-jquery-css.html Shocked

Guest


Guest
Come on guys...do something youself...dont request for a copy-paste code...

Matti

Matti
Registered Member
Registered Member
Nick wrote:Come on guys...do something youself...dont request for a copy-paste code...

What if somebody don't know how to do it and ofc he will ask for help so if you are that kind to help...just help him instead of posting random posts. Wink

http://csshelp.forumotion.net/

Guest


Guest
Maki wrote:
Nick wrote:Come on guys...do something youself...dont request for a copy-paste code...
What if somebody don't know how to do it and ofc he will ask for help so if you are that kind to help...just help him instead of posting random posts. Wink
If someone doesn't know how to do basic HTML/CSS, I am kind enough to help by pointing them to places like w3schools.com where they can learn on their own.

I will also provide basic help and guidance which may at times include code. Beyond that, I am happy to help as well, but it will require a guaranteed form of payment. In the real world, people aren't going to do your work without expecting to be paid. Consider it an early life lesson. Wink

blade99

blade99
Registered Member
Registered Member
hey can i ask where should i apply this and where part should.

http://dreamland.canadianforum.net/

ankillien

ankillien
Administrator
Administrator
Go to overall_header template, find this part <div id="pun-head">

Add the following code right after that...

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>

Now find </head> in the same template, and add the following code BEFORE that...

Code:
<script type="text/javascript">
$(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"
   });

});
</script>

Now, save and publish the template.

Now you have to add this code in your CSS...

Code:
ul.topnav {
   list-style: none;
   padding: 0 20px;
   margin: 0;
   float: left;
   width: 920px;
   background: #222;
   font-size: 1.2em;
   background: url(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(topnav_hover.gif) no-repeat center top;
}
ul.topnav li span { /*--Drop down trigger styles--*/
   width: 17px;
   height: 35px;
   float: left;
   background: url(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(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(dropdown_linkbg.gif) no-repeat 10px center;
}

blade99

blade99
Registered Member
Registered Member
@ankillien there is no <div id="pun-head"> in over_header i press ctrl+f i search dont appears y?

http://dreamland.canadianforum.net/

Guest


Guest
Maki wrote:
Nick wrote:Come on guys...do something youself...dont request for a copy-paste code...

What if somebody don't know how to do it and ofc he will ask for help so if you are that kind to help...just help him instead of posting random posts. Wink

instead of giving him a copy-paste code (like ankillien did now) why not tell him where to add the codes?

also,this was seen for the first time at Creative-Labz.It was emilio's idea.So its not correct to give the copy-paste to whoever asks for it.Thats why Creative-Labz gets copied every day and more and moremembers here keep asking how to achieve things like CL at their forum.I will tell you how to achieve this,but not copy-paste codes.Unfair.They Spend the whole day trying to add this to their website/forum and then a n00b comes here,requests it and you give him the code ready to copy-paste it?Unfair! Mad

14how to add down down menu in forumotion Empty Re: how to add down down menu in forumotion Sun Dec 19, 2010 11:39 pm

Guest


Guest
also,this was seen for the first time at Creative-Labz.It was emilio's idea.So its not correct to give the copy-paste to whoever asks for it.Thats why Creative-Labz gets copied every day and more and moremembers here keep asking how to achieve things like CL at their forum.I will tell you how to achieve this,but not copy-paste codes.Unfair.They Spend the whole day trying to add this to their website/forum and then a n00b comes here,requests it and you give him the code ready to copy-paste it?Unfair! Mad
I completely agree with you in principle. I would be very angry if someone, without my permission, posted code that I wrote.

But is that the case here? It appears that ankillien took code from a demo and showed people how to make it work on forumotion PunBB boards. Exactly what you said above, in the text that I boldfaced.

#Spacca

#Spacca
Registered Member
Registered Member
in my forum i don't look these: how to add down down menu in forumotion Subnav_btn

Guest


Guest
#Spacca wrote:in my forum i don't look these: how to add down down menu in forumotion Subnav_btn

ahh here you are again Razz
what else will you copy ?

Man,you dont even know english(since i cant understand what you are saying).Use a free translator from italian to english and make a correct post.

On topic,if you dont see it means somethings wrong with the code.Which means you should learn some coding basics Razz

#Spacca

#Spacca
Registered Member
Registered Member
Well, in my forum when i apply the codes this: how to add down down menu in forumotion Subnav_btn doesn't appear!

COR3 POW3R


Registered Member
Registered Member
Well, we have a policy against this thing called ripping. Those images, you are ripping them. Wink

19how to add down down menu in forumotion Empty Re: how to add down down menu in forumotion Mon Dec 20, 2010 10:35 am

ankillien

ankillien
Administrator
Administrator
@blade99
Then it could be there in index_body template.

@Nick, dion has spoken my words. I have posted codes from the tutorial site and not yours. Also, the drop-down menu codes on your site are from some tutorial site Razz and the show/hide categories and profiles are coded by me. If you search forums, you'll find those solved and locked topics Wink

So, we are not to be blamed if your site gets copied. What you are saying is that helping someone to install a drop-down menu (which is from a tutorial site and not coded by you) is UNFAIR! This is like an insult to me.

Refrain form posting such messages in future, my friend! At least think one more time before hitting the 'Send' button.

20how to add down down menu in forumotion Empty Re: how to add down down menu in forumotion Mon Dec 20, 2010 12:41 pm

blade99

blade99
Registered Member
Registered Member
ankilien Wrote:
@blade99
Then it could be there in index_body template.

still its not on index_body --> <div id="pun-head"> ?

http://dreamland.canadianforum.net/

ankillien

ankillien
Administrator
Administrator
It is in the overall_header. Make sure you have punBB version.

22how to add down down menu in forumotion Empty Re: how to add down down menu in forumotion Mon Dec 20, 2010 10:11 pm

blade99

blade99
Registered Member
Registered Member
ahhh i tought phpbb2

http://dreamland.canadianforum.net/

sgeorge


Registered Member
Registered Member
Can that be added on a phpbb2 forum ?

ankillien

ankillien
Administrator
Administrator
To make it work in phpBB2, go to overall_header template and find this...3

Code:
<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
               <tr>
                  <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
               </tr>
            </table>

Add the following code before or after it...

Code:
<style>
ul.topnav {
  list-style: none;
  padding: 0 20px;
  margin: 0;
  float: left;
  width: 920px;
  background: #222;
  font-size: 1.2em;
  background: #000;
}
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: #666;
}
ul.topnav li span { /*--Drop down trigger styles--*/
  width: 17px;
  height: 35px;
  float: left;
  background: red;
}
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;
  padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
  background: #222 url(dropdown_linkbg.gif) no-repeat 10px center;
}
</style>

<script type="text/javascript">
$(document).ready(function(){

  $("ul.subnav").parent().append("<span></span>");

  $("ul.topnav li span").click(function() {

      $(this).parent().find("ul.subnav").slideDown('fast').show();

      $(this).parent().hover(function() {
      }, function(){
        $(this).parent().find("ul.subnav").slideUp('slow');
      });

     
      }).hover(function() {
        $(this).addClass("subhover");
      }, function(){ 
        $(this).removeClass("subhover");
  });

});
</script>

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

Save the template and publish it Smile

sgeorge


Registered Member
Registered Member
It did not work great.... I pm'd you the URL of my site to check it...

If you see the trigers are not displayed and it's style it's gone...

Thank you



Last edited by sgeorge on Sun Dec 26, 2010 9:49 pm; edited 1 time in total

Sponsored content


View previous topic View next topic Back to top  Message [Page 1 of 2]

Go to page : 1, 2  Next

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