Choose from our various pricing plans. There is a package for everyone!


Sexy Drop Down Menu with jQuery & CSS - (PunBB and PhpBB2)

Page 2 of 2 Previous  1, 2

View previous topic View next topic Go down

Tutorial Sexy Drop Down Menu with jQuery & CSS - (PunBB and PhpBB2)

Post by Mati™ on Sat Jun 30, 2012 8:41 pm

First topic message reminder :

Sexy Drop Down Menu with jQuery and CSS

See Source
Author: Soh Tanaka

Navigation Menu is one of the most important thing on your forum.

In this tutorial you will learn how to create a beautiful and professional Drop Down Menu. We will create this effect using jQuery. You need to edit templates;

The HTML code is very simple. You just need a list of links. If it has a sub-menu, it should have another list inside. Your HTML code should be like this below:

Step 1: The HTML code:

Administration Panel => Display => Templates => General Edit template overall_header Find this code:

Code:

<div id="pun-navlinks">
        <ul class="clearfix">
      <li>{GENERATED_NAV_BAR}</li>
  </ul>
</div>

And replace with this:
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>
                    <li><a href="#">Sub Nav Link</a></li>
                    <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>

                    <li><a href="#">Sub Nav Link</a></li>
                    <li><a href="#">Sub Nav Link</a></li>
                    <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>

            <li>
                <a href="#">More</a>
                <ul class="subnav">
                    <li><a href="#">Follow Us on Twitter</a></li>
                    <li><a href="#">Like Us on Facebook</a></li>
                    <li><a href="#">Subscribe on Youtube</a></li>
                </ul>
            </li>

        </ul>  

Hit save and click publish

Step 2: The CSS code:
Administration Panel => Display => Colors => CSS Stylesheet Paste the following to the bottom of your CSS and then click Submit:

Code:
ul.topnav {
 list-style: none;
 padding: 0 20px;
margin: 0;
 float: left;
 width: 920px;
 background: #222;
 font-size: 1.2em;
 background: url(http://i43.servimg.com/u/f43/14/73/12/96/topnav10.gif) repeat-x;
}
ul.topnav li {
 float: left;
 margin: 0;
padding: 0 15px 0 0;
 position: relative; /*--Declare X and Y axis base--*/
}
ul.topnav li a{
 padding: 10px 5px;
 color: #fff;
 display: block;
 text-decoration: none;
 float: left;
}
ul.topnav li a:hover{
 background: url(http://i43.servimg.com/u/f43/14/73/12/96/topnav11.gif) no-repeat center top;
}
ul.topnav li span { /*--Drop down trigger styles--*/
 width: 17px;
 height: 35px;
 float: left;
 background: url(http://i43.servimg.com/u/f43/14/73/12/96/subnav10.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;
 left: 0; top: 35px;
 background: #333;
 margin: 0; padding: 0;
 display: none;
 float: left;
 width: 170px;
 -webkit-border-bottom-right-radius: 05px;
 -webkit-border-bottom-left-radius: 5px;
 -moz-border-radius-bottomright: 05px;
 -moz-border-radius-bottomleft: 5px;
 border-bottom-right-radius: 05px;
 border-bottom-left-radius: 5px;
 border: 1px solid #111;
}
ul.topnav li ul.subnav li{
 margin: 0; padding: 0;
 border-top: 1px solid #252525;
border-bottom: 1px solid #444;
clear: both;
 width: 170px;
 -webkit-border-bottom-right-radius: 05px;
 -webkit-border-bottom-left-radius: 5px;
 -moz-border-radius-bottomright: 05px;
 -moz-border-radius-bottomleft: 5px;
 border-bottom-right-radius: 05px;
 border-bottom-left-radius: 5px;
}
html ul.topnav li ul.subnav li a {
 float: left;
 width: 145px;
 background: #333 url(http://i43.servimg.com/u/f43/14/73/12/96/dropdo10.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://i43.servimg.com/u/f43/14/73/12/96/dropdo10.gif) no-repeat 10px center;
}

Step 3: The jQuery code:
Put this link in the template overall_header where other script are below head tag.
Code:

<script type="text/javascript" src="http://near-reality123123123.webs.com/bar.js"></script>


If you have any problems be sure to post them and I will get back to you A.S.A.P.


Last edited by Mati™ on Sat Nov 15, 2014 1:56 am; edited 2 times in total
avatar
Mati™
Administrator
Administrator

Age : 31
Posts : 2112
Join date : 2011-10-20
Forum Version : PhpBB3
Reputation : 147

View user profile http://fmfocus.forumotion.net/forum

Back to top Go down


Tutorial Re: Sexy Drop Down Menu with jQuery & CSS - (PunBB and PhpBB2)

Post by MarkoNinic1994 on Tue Sep 11, 2012 4:44 pm

Code:
<!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} {NAMESPACE_BBCODE}>
<head>
   <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_compat_meta -->
   <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
   <!-- END switch_compat_meta -->
   <!-- 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 elements */
            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 conteneur en fonction des elements et de la hauteur personnalisee dans l'admin */
            $('ul#fa_ticker_content li').each( function () {
               if ($(this).height() > height_max)
               {
                  height_max = $(this).height();
               }
            } );

            /* Redimensionnement des elements 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 -->
   {HOSTING_JS}
   <!-- BEGIN google_analytics_code -->
   <script type="text/javascript">
   //<![CDATA[
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', '{G_ANALYTICS_ID}']);
    _gaq.push(['_trackPageview']);
   _gaq.push(['_trackPageLoadTime']);

   <!-- BEGIN google_analytics_code_bis -->
   _gaq.push(['b._setAccount', '{G_ANALYTICS_ID_BIS}']);
   _gaq.push(['b._trackPageview']);
   <!-- END google_analytics_code_bis -->

    (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 class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
      <tr>
         <td class="bodyline">
            <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 />&nbsp; </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 cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
               <tr>
                       <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
               </tr>
            </table>

            <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="{C1SIZE}">
                              <div id="{ID_LEFT}">
                                 <!-- BEGIN giefmod_index1 -->
                                 {giefmod_index1.MODVAR}
                                    <!-- BEGIN saut -->
                                    <div style="height:{SPACE_ROW}px"></div>
                                    <!-- END saut -->
                                 <!-- END giefmod_index1 -->
                              </div>
                           </td>
                           <td valign="top" width="100%">
<!-- BEGIN html_validation -->
                           </td>
                        </tr>
                     </tbody>
                  </table>
               </div>
            </div>
         </td>
      </tr>
   </table>
</body>
</html>
<!-- END html_validation -->
there it is mate
avatar
MarkoNinic1994
Member
Member

Age : 23
Posts : 10
Join date : 2012-09-11
Reputation : 0

View user profile http://anroidnewbies.danskforum.net/

Back to top Go down

Tutorial Re: Sexy Drop Down Menu with jQuery & CSS - (PunBB and PhpBB2)

Post by kazmok on Fri Sep 14, 2012 6:31 am

ya, I don't get a drop down either
avatar
kazmok
Member
Member

Age : 24
Posts : 9
Join date : 2012-09-13
Reputation : 0

View user profile

Back to top Go down

Tutorial Re: Sexy Drop Down Menu with jQuery & CSS - (PunBB and PhpBB2)

Post by Mr.Joker on Fri Sep 14, 2012 11:17 am

Awesome tutorial. I added this on my test forum: http://fight-club.mo-rpg.com/ and it works good. Just it's a bit widther but I can fix that alone Very Happy .


Please read forum rules. Don't request help via PM!

avatar
Mr.Joker
Premium Member


Age : 25
Posts : 283
Join date : 2012-06-24
Reputation : 21

View user profile

Back to top Go down

Tutorial Re: Sexy Drop Down Menu with jQuery & CSS - (PunBB and PhpBB2)

Post by lightningterror on Tue Nov 27, 2012 12:55 pm

put a div tag around it for phpbb2


should look like this
Code:
<div><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>
                    <li><a href="#">Sub Nav Link</a></li>
                    <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>

                    <li><a href="#">Sub Nav Link</a></li>
                    <li><a href="#">Sub Nav Link</a></li>
                    <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>

            <li>
                <a href="#">More</a>
                <ul class="subnav">
                    <li><a href="#">Follow Us on Twitter</a></li>
                    <li><a href="#">Like Us on Facebook</a></li>
                    <li><a href="#">Subscribe on Youtube</a></li>
                </ul>
            </li>

        </ul>
</div>
avatar
lightningterror
Member
Member

Age : 25
Posts : 1
Join date : 2012-11-27
Reputation : 0

View user profile

Back to top Go down

Tutorial Re: Sexy Drop Down Menu with jQuery & CSS - (PunBB and PhpBB2)

Post by MarkoNinic1994 on Fri Dec 07, 2012 5:05 pm

hmm this is what i get when i do all the steps Very Happy http://testtesttesttesttest.serbianforum.info/forum anyone help?
avatar
MarkoNinic1994
Member
Member

Age : 23
Posts : 10
Join date : 2012-09-11
Reputation : 0

View user profile http://anroidnewbies.danskforum.net/

Back to top Go down

Tutorial Re: Sexy Drop Down Menu with jQuery & CSS - (PunBB and PhpBB2)

Post by RSguideMaker on Sat Dec 08, 2012 1:52 pm

@MarkoNinic1994 wrote:hmm this is what i get when i do all the steps Very Happy http://testtesttesttesttest.serbianforum.info/forum anyone help?

Please open a topic here if you wish to be helped. We will not support you on the tutorial page.



Please do not request help via PM! Post on the forums where it can help everyone.
avatar
RSguideMaker
Support Moderator
Support Moderator

Age : 18
Posts : 421
Join date : 2012-05-23
Reputation : 9

View user profile http://euanfitzpatrick.co.nf/

Back to top Go down

Tutorial Re: Sexy Drop Down Menu with jQuery & CSS - (PunBB and PhpBB2)

Post by lee_park on Mon Dec 10, 2012 3:00 am

it can be use in invision??
avatar
lee_park
Member
Member

Age : 22
Posts : 1
Join date : 2012-07-25
Reputation : 0

View user profile

Back to top Go down

Tutorial Re: Sexy Drop Down Menu with jQuery & CSS - (PunBB and PhpBB2)

Post by J0k3R^ on Thu Apr 25, 2013 5:01 pm

ive got edited the Index_Body and my Nav Bar is at the top of my forum. will this tutorial work? worried
avatar
J0k3R^
Member
Member

Age : 24
Posts : 25
Join date : 2013-04-25
Forum Version : PunBB
Reputation : 1

View user profile http://fmplanet.forumgreek.com/

Back to top Go down

Tutorial Re: Sexy Drop Down Menu with jQuery & CSS - (PunBB and PhpBB2)

Post by Derri on Thu Jun 06, 2013 1:58 pm

Can you change the colour of the drop down menu?
avatar
Derri
Administrator
Administrator

Age : 21
Posts : 178
Join date : 2013-05-03
Forum Version : PunBB
Reputation : 10

View user profile http://www.thefmnetwork.com

Back to top Go down

Tutorial Re: Sexy Drop Down Menu with jQuery & CSS - (PunBB and PhpBB2)

Post by Mati™ on Thu Jun 06, 2013 10:18 pm

@Derri wrote:Can you change the colour of the drop down menu?

Yes you can.
avatar
Mati™
Administrator
Administrator

Age : 31
Posts : 2112
Join date : 2011-10-20
Forum Version : PhpBB3
Reputation : 147

View user profile http://fmfocus.forumotion.net/forum

Back to top Go down

Tutorial Re: Sexy Drop Down Menu with jQuery & CSS - (PunBB and PhpBB2)

Post by unleashed on Sat Aug 24, 2013 6:01 am

this is awsome can u help me to make it for phpbb3 version please ?

Thanks
avatar
unleashed
Member
Member

Age : 32
Posts : 22
Join date : 2013-08-24
Forum Version : PhpBB3
Reputation : 0

View user profile

Back to top Go down

Tutorial Re: Sexy Drop Down Menu with jQuery & CSS - (PunBB and PhpBB2)

Post by mangaka on Wed Aug 28, 2013 12:34 pm

@unleashed wrote:this is awsome can u help me to make it for phpbb3 version please ?

Thanks
Then put this code:

Code:
<script type="text/javascript" src="http://near-reality123123123.webs.com/bar.js"></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>
                    <li><a href="#">Sub Nav Link</a></li>
                    <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>
                    <li><a href="#">Sub Nav Link</a></li>
                    <li><a href="#">Sub Nav Link</a></li>
                    <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>
            <li>
                <a href="#">More</a>
                <ul class="subnav">
                    <li><a href="#">Follow Us on Twitter</a></li>
                    <li><a href="#">Like Us on Facebook</a></li>
                    <li><a href="#">Subscribe on Youtube</a></li>
                </ul>
            </li>
        </ul>
on your Homepage(Generalities).

And put the CSS on your Stylesheet.
avatar
mangaka
Member
Member

Age : 23
Posts : 18
Join date : 2013-07-30
Forum Version : PunBB
Reputation : 0

View user profile

Back to top Go down

Tutorial Re: Sexy Drop Down Menu with jQuery & CSS - (PunBB and PhpBB2)

Post by Nubss on Fri Feb 28, 2014 1:13 pm

Is there a way to make a log in/log out/register navigation bar that automatically changes depending on their status? I'm unable to log out, not that it's an issue but it looks unprofessional. Also, is there a way to change the width (or centralise) to make it perfectly fit my forums?
Thanks! Very Happy


Edit: I've change the width to perfectly fit my forums now! So I no longer require help in that field, thanks. Smile

Also, I've tried adding a new drop down menu to another navigation bar but it won't work :/ It keeps ending in a similar glitchy result, can anyone help? As newby explanation as possible please, I'm very new to coding. 

Still need help with the register/log in/log out automatic navigation bar that changes depending on whether you are logged in or not.

All help is very much appreciated, thanks all!
avatar
Nubss
Member
Member

Age : 21
Posts : 18
Join date : 2014-02-24
Forum Version : PunBB
Reputation : 1

View user profile

Back to top Go down

Tutorial Re: Sexy Drop Down Menu with jQuery & CSS - (PunBB and PhpBB2)

Post by erchima on Wed Mar 26, 2014 10:21 am

copyright by http://www.noupe.com/tutorial/drop-down-menu-jquery-css.html
avatar
erchima
Member
Member

Age : 23
Posts : 6
Join date : 2013-11-26
Forum Version : PunBB
Reputation : 0

View user profile

Back to top Go down

Tutorial Re: Sexy Drop Down Menu with jQuery & CSS - (PunBB and PhpBB2)

Post by Jadster on Tue Apr 29, 2014 4:39 pm

@erchima wrote:copyright by http://www.noupe.com/tutorial/drop-down-menu-jquery-css.html
We realize it may be "Copyright" but Mati™ has also linked back to the original source. He is not taking it word for his own, he has linked back to the original source to give proper credit.
avatar
Jadster
Support Moderator
Support Moderator

Age : 20
Posts : 141
Join date : 2012-08-27
Forum Version : PunBB
Reputation : 16

View user profile http://www.adminvortex.com

Back to top Go down

Tutorial Re: Sexy Drop Down Menu with jQuery & CSS - (PunBB and PhpBB2)

Post by J0k3R^ on Thu May 01, 2014 8:31 am

Hello, very nice tutorial and thank u very much
i would just please u to make me this image on hover 
with this color #2d5b7a instead of black plz Smile
avatar
J0k3R^
Member
Member

Age : 24
Posts : 25
Join date : 2013-04-25
Forum Version : PunBB
Reputation : 1

View user profile http://fmplanet.forumgreek.com/

Back to top Go down

Tutorial Re: Sexy Drop Down Menu with jQuery & CSS - (PunBB and PhpBB2)

Post by J0k3R^ on Sun Dec 14, 2014 1:41 pm

avatar
J0k3R^
Member
Member

Age : 24
Posts : 25
Join date : 2013-04-25
Forum Version : PunBB
Reputation : 1

View user profile http://fmplanet.forumgreek.com/

Back to top Go down

Tutorial Re: Sexy Drop Down Menu with jQuery & CSS - (PunBB and PhpBB2)

Post by Nick! on Wed Apr 01, 2015 5:04 am

Sexy...  Razz

Nick!
Member
Member

Posts : 25
Join date : 2012-04-06
Reputation : 1

View user profile

Back to top Go down

Tutorial Re: Sexy Drop Down Menu with jQuery & CSS - (PunBB and PhpBB2)

Post by Sponsored content


Sponsored content


Back to top Go down

Page 2 of 2 Previous  1, 2

View previous topic View next topic Back to top


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