Member Login

Forgot password?

Howdy! Welcome.

We offer a wide range of High Quality Free and Premium SMF themes that will match the feel you are looking for!

Looking for support? Please make sure you've read the Posting Guidelines and used the Search before starting new topics! Thank you!

« previous next »
Pages: [1] 2 3  All   Go Down

Author Topic: DropDown menu  (Read 6692 times)

Offline DjScrappy

  • Jr. Member
  • *
  • Posts: 10
    • Email
DropDown menu
« on: Dec 05, 2008, 06:08:30 »
Hi All I Just Wanted To say What An Awsome Theme, I Did Notice That You Have 3 Files In A Css Folder Are Those Supposed To Make A Drop Down Menu For The X-mas Theme And How Are We Supposed To Add Those And Where.. Thanks DjScrappy
Logged

Offline antechinus

  • Support Team
  • Hero Member
  • *
  • Posts: 2979
Re: DropDown menu
« Reply #1 on: Dec 05, 2008, 12:34:03 »
You must have the SMF 2 version. Those are standard SMF 2 files. All themes have them. Leave them where they are.
Logged
Using IE 6 on the internet is like urinating in a public swimming pool. It's rude,
there's no excuse for it, and anyone who does it should be ashamed of themselves.

Offline DjScrappy

  • Jr. Member
  • *
  • Posts: 10
    • Email
Re: DropDown menu
« Reply #2 on: Dec 05, 2008, 16:21:51 »
yes i have smf 2.0 beta 4 and yes i will leave them right there. Is There Any Way Of Making Drop Down Menu For The X-mas Skin :goodstuff: :goodstuff:
Logged

Offline antechinus

  • Support Team
  • Hero Member
  • *
  • Posts: 2979
Re: DropDown menu
« Reply #3 on: Dec 06, 2008, 00:39:59 »
Of course there is. I'll be posting a tutorial about that very soon. I've already set up the 1.1.x version on my local and just have to do the 2b4 version, which wont take that long. Expect it in the next day or two.
Logged
Using IE 6 on the internet is like urinating in a public swimming pool. It's rude,
there's no excuse for it, and anyone who does it should be ashamed of themselves.

Offline antechinus

  • Support Team
  • Hero Member
  • *
  • Posts: 2979
Re: DropDown menu
« Reply #4 on: Dec 06, 2008, 03:47:59 »
Ok, drop menu tutorial for SMF 1.1.x versions of the theme. I'll do the 2b4 version tomorrow.

This menu includes a TP forum button. Delete that if you don't want it.

Index.template.php:

Find:

Code: [Select]
echo '
document.getElementById("upshrink_ic").src = smf_images_url + (mode ? "/expand.gif" : "/collapse.gif");

document.getElementById("upshrinkHeaderIC").style.display = mode ? "none" : "";

current_header_ic = mode;
}
// ]]></script>

</head>
<body>
Replace with:

Code: [Select]
echo '
document.getElementById("upshrink_ic").src = smf_images_url + (mode ? "/expand.gif" : "/collapse.gif");

document.getElementById("upshrinkHeaderIC").style.display = mode ? "none" : "";

current_header_ic = mode;
}
// ]]></script>';

echo '
    <script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
      var PreloadImages = new Array(
         "/images/submenu_top.png",
         "/images/submenu_bg.png"
      );

      var myImages = new Array();
      for(var i = 0; i < PreloadImages.length; i++)
      {
         myImages[i] = new Image();
         myImages[i].src = "'. $settings['theme_url'] .'" + PreloadImages[i];
      }
    // ]]></script>';

echo '

</head>
<body>

Find:

Code: [Select]
// Show the start of the tab section.
echo '
<div id="topmenu">
<ul>';
// Show the [home] button.
echo '<li><a' , $current_action=='home' ? ' class="current"' : '' , ' href="', $scripturl, '"><span>' , $txt[103] , '</span></a></li>';

if($settings['TPortal_front_type']!='boardindex')
// Show the [forum] button.
echo '<li><a' , $current_action=='forum' ? ' class="current"' : '' , ' href="', $scripturl, '?action=forum"><span>' , $txt['tp-forum'] , '</span></a></li>';

// Show the [help] button.
echo '<li><a' , $current_action=='help' ? ' class="current"' : '' , ' href="', $scripturl, '?action=help"><span>' , $txt[119] , '</span></a></li>';

// How about the [search] button?
if ($context['allow_search'])
echo '<li><a' , $current_action=='search' ? ' class="current"' : '' , ' href="', $scripturl, '?action=search"><span>' , $txt[182] , '</span></a></li>';

// The [calendar]!
if ($context['allow_calendar'])
echo '<li><a' , $current_action=='calendar' ? ' class="current"' : '' , ' href="', $scripturl, '?action=calendar"><span>' , $txt['calendar24'] , '</span></a></li>';

// Is the user allowed to administrate at all? ([admin])
if ($context['allow_admin'])
echo '<li><a' , $current_action=='admin' ? ' class="current"' : '' , ' href="', $scripturl, '?action=admin"><span>' , $txt[2] , '</span></a></li>';

// Edit Profile... [profile]
if ($context['allow_edit_profile'])
echo '<li><a' , $current_action=='profile' ? ' class="current"' : '' , ' href="', $scripturl, '?action=profile"><span>' , $txt[79] , '</span></a></li>';

// Go to PM center... [pm]
if ($context['user']['is_logged'] && $context['allow_pm'])
echo '<li><a' , $current_action=='pm' ? ' class="current"' : '' , ' href="', $scripturl, '?action=pm"><span>' , $txt['pm_short'] , ' ', $context['user']['unread_messages'] > 0 ? '[<strong>'. $context['user']['unread_messages'] . '</strong>]' : '' , '</span></a></li>';

// the [member] list button
if ($context['allow_memberlist'])
echo '<li><a ' , $current_action=='mlist' ? ' class="current"' : '' , ' href="', $scripturl, '?action=mlist"><span>' , $txt[331] , '</span></a></li>';

// If the user is a guest, show [login] button.
if ($context['user']['is_guest'])
echo '<li><a ' , $current_action=='login' ? ' class="current"' : '' , ' href="', $scripturl, '?action=login"><span>' , $txt[34] , '</span></a></li>';

// If the user is a guest, also show [register] button.
if ($context['user']['is_guest'])
echo '<li><a ' , $current_action=='register' ? ' class="current"' : '' , ' href="', $scripturl, '?action=register"><span>' , $txt[97] , '</span></a></li>';

// Otherwise, they might want to [logout]...
if ($context['user']['is_logged'])
echo '<li><a ' , $current_action=='logout' ? ' class="current"' : '' , 'href="', $scripturl, '?action=logout;sesc=', $context['session_id'], '"><span>' , $txt[108] , '</span></a></li>';

echo '
</ul>
<div style="float: right; padding: 10px 2px 0 0">';
// TinyPortal
if($context['TPortal']['leftbar'])
echo ' <a href="javascript:void(0);" onclick="shrinkHeaderLeftbar(!current_leftbar); return false;"><img id="upshrinkLeftbar" src="', $settings['images_url'], '/', empty($options['collapse_leftbar']) ? 'upshrink.gif' : 'upshrink2.gif', '" alt="*" title="', $txt['upshrink_description'], '" style="margin: 0 1ex;" border="0" /></a><img id="upshrinkTempLeftbar" src="', $settings['images_url'], '/blank.gif" alt="" style="margin-right: 0ex;" />';
if($context['TPortal']['rightbar'])
echo ' <a href="javascript:void(0);" onclick="shrinkHeaderRightbar(!current_rightbar); return false;"><img id="upshrinkRightbar" src="', $settings['images_url'], '/', empty($options['collapse_rightbar']) ? 'upshrink.gif' : 'upshrink2.gif', '" alt="*" title="', $txt['upshrink_description'], '" style="margin: 0 1ex;" border="0" /></a><img id="upshrinkTempRightbar" src="', $settings['images_url'], '/blank.gif" alt="" style="margin-right: 0ex;" />';
// TinyPortal end
echo '
            </div>
</div>';

}
Replace with:

Code: [Select]
// Show the start of the tab section.
echo '
  <div class="tabs">
<ul>
<li>
<a' , $current_action=='home' ? ' class="current"' : '' , ' href="', $scripturl, '">
<span class="menu-left"></span>
<span class="menu-right">' , $txt[103] , '</span>
</a>
</li>';

if($settings['TPortal_front_type']!='boardindex')
// Show the [forum] button.
echo'
<li>
<a' , $current_action=='forum' ? ' class="current"' : '' , ' href="', $scripturl, '?action=forum">
<span class="menu-left"></span>
<span class="menu-right">' , $txt['tp-forum'] , '</span>
</a>
</li>';

//Show the Help button
echo'
<li>
<a' , $current_action=='help' ? ' class="current"' : '' , ' href="', $scripturl, '?action=help">
<span class="menu-left"></span>
<span class="menu-right">' , $txt[119] , '</span>
</a>
</li>';

//Show the Search button
  if ($context['allow_search'])
echo'
<li>
<a' , $current_action=='search' ? ' class="current"' : '' , ' href="', $scripturl, '?action=search">
<span class="menu-left"></span>
<span class="menu-right">' , $txt[182] , '</span>
</a>
</li>';

                 // The [calendar]!
                 if ($context['allow_calendar'])
                 echo'
<li>
<a' , $current_action=='calendar' ? ' class="current"' : '' , ' href="', $scripturl, '?action=calendar">
<span class="menu-left"></span>
<span class="menu-right">' , $txt['calendar24'] , '</span>
</a>
</li>';
                 
//Show the [member] button
if ($context['allow_memberlist'])
echo'
<li>
<a' , $current_action=='mlist' ? ' class="current"' : '' , ' href="', $scripturl, '?action=mlist">
<span class="menu-left"></span>
<span class="menu-right">' , $txt[331] , '</span>
</a>
         <div class="sub">
<ul>
<li><a href="index.php?action=mlist">View Memberlist</a></li>
  <li><a href="index.php?action=mlist;sa=search">Search Memberlist</a></li>
  </ul>
  </div>
</li>';

// Go to PM center... [pm]
  if ($context['user']['is_logged'] && $context['allow_pm'])
echo'
  <li>
<a' , $current_action=='pm' ? ' class="current"' : '' , ' href="', $scripturl, '?action=pm">
<span class="menu-left"></span>
<span class="menu-right">' , $txt['pm_short'] , ' ', $context['user']['unread_messages'] > 0 ? '[<strong>'. $context['user']['unread_messages'] . '</strong>]' : '' , '</span>
</a>
<div class="sub">
<ul>
<li><a href="index.php?action=pm;f=outbox">Outbox</a></li>
<li><a href="index.php?action=pm;sa=send">Send Message</a></li>
<li><a href="index.php?action=pm;sa=search">Search Messages</a></li>
<li><a href="index.php?action=profile;sa=pmprefs">Personal Message Options</a></li>
  </ul>
  </div>
  </li>';

// Edit Profile... [profile]
if ($context['allow_edit_profile'])
echo'
<li>
<a' , $current_action=='profile' ? ' class="current"' : '' , ' href="', $scripturl, '?action=profile">
<span class="menu-left"></span>
<span class="menu-right">' , $txt[79] , '</span>
</a>
<div class="sub">
<ul>
<li><a href="index.php?action=profile;sa=forumProfile">Forum Profile</a></li>
<li><a href="index.php?action=profile;sa=theme">Look and Layout</a></li>
<li><a href="index.php?action=profile;sa=account">Account Settings</a></li>
<li><a href="index.php?action=profile;sa=notification">Notifications and Email</a></li>
  </ul>
  </div>
  </li>';

  // Is the user allowed to administrate at all? ([admin])
if ($context['allow_admin'])
echo'
<li>
<a' , $current_action=='admin' ? ' class="current"' : '' , ' href="', $scripturl, '?action=admin">
<span class="menu-left"></span>
<span class="menu-right">' , $txt[2] , '</span>
</a>
<div class="sub">
<ul>
<li><a href="index.php?action=packages">Packages</a></li>
<li><a href="index.php?action=regcenter">Registration</a></li>
<li><a href="index.php?action=viewErrorLog;desc">Forum Error Log</a></li>
<li><a href="index.php?action=maintain">Forum Maintenance</a></li>
<li><a href="index.php?action=news">News and Newsletters</a></li>
</ul>
</div>
  </li>';

// If the user is a guest, show the [login] button.
if ($context['user']['is_guest'])
  echo'
<li>
<a ' , $current_action=='login' ? ' class="current"' : '' , 'href="', $scripturl, '?action=login">
<span class="menu-left"></span>
<span class="menu-right">' , $txt[34] , '</span>
</a>
</li>';

// If the user is a guest, also show  the[register] button.
if ($context['user']['is_guest'])
echo'
     <li>
<a ' , $current_action=='register' ? ' class="current"' : '' , 'href="', $scripturl, '?action=register">
<span class="menu-left"></span>
<span class="menu-right">' , $txt[97] , '</span>
</a>
</li>';

// Otherwise, they might want to [logout]...
if ($context['user']['is_logged'])
echo'
     <li>
<a ' , $current_action=='logout' ? ' class="current"' : '' , 'href="', $scripturl, '?action=logout;sesc=', $context['session_id'],' ">
<span class="menu-left"></span>
<span class="menu-right">' , $txt[108] , '</span>
</a>
</li>';

echo '
</ul>
<div style="float: right; padding: 10px 2px 0 0">';
// TinyPortal
if($context['TPortal']['leftbar'])
echo ' <a href="javascript:void(0);" onclick="shrinkHeaderLeftbar(!current_leftbar); return false;"><img id="upshrinkLeftbar" src="', $settings['images_url'], '/', empty($options['collapse_leftbar']) ? 'upshrink.gif' : 'upshrink2.gif', '" alt="*" title="', $txt['upshrink_description'], '" style="margin: 0 1ex;" border="0" /></a><img id="upshrinkTempLeftbar" src="', $settings['images_url'], '/blank.gif" alt="" style="margin-right: 0ex;" />';
if($context['TPortal']['rightbar'])
echo ' <a href="javascript:void(0);" onclick="shrinkHeaderRightbar(!current_rightbar); return false;"><img id="upshrinkRightbar" src="', $settings['images_url'], '/', empty($options['collapse_rightbar']) ? 'upshrink.gif' : 'upshrink2.gif', '" alt="*" title="', $txt['upshrink_description'], '" style="margin: 0 1ex;" border="0" /></a><img id="upshrinkTempRightbar" src="', $settings['images_url'], '/blank.gif" alt="" style="margin-right: 0ex;" />';
// TinyPortal end
echo '
            </div>
</div>';

}
Note that this inlcudes text strings hard coded in English. It's Christmas. I'm feeling lazy.  ;D

Anyway, style.css:

Add this to the end of the file:

Code: [Select]
/*Drop menu codes*/

#toolbar {
height: 34px;
}

.tabs {
float: left;
margin: 0 0 0 0;
padding: 14px 0 0 0;
font-size: 11px;
list-style: none;
background: none;
color: #444444;
height: 34px;
font-family: Arial Narrow, Arial, sans-serif;
font-weight: bold;
font-size: 14px;
}

.tabs a:link{
  color: #444444;
cursor: pointer;
}

.tabs a:visited {
  color: #444444;
}

.tabs ul {
height: 30px;
float: left;
margin: 0;
padding: 0;
list-style: none;
}

.tabs ul li a.current {
color: #FFFFFF;
}

.tabs li {
float: left;
padding: 0;
position: relative;
z-index: 1;
background: none;
}

.tabs li:hover {
z-index:2;
}

.tabs li a {
display: block;
line-height: 26px;
overflow: hidden;
float: left;
}

a .menu-left {
     width: 20px;
display: block;
float: left;
overflow: hidden;
     margin: 0 0 0 0;
padding: 0 0 4px 0;
text-decoration: none;
line-height: 30px;
height: 30px;
color: #444;
list-style: none;
     background: url(images/custom/topmenu-l2.png) 0 0 no-repeat;
}

a .menu-right {
width: auto;
height: 30px;
line-height: 30px;
display: block;
float: left;
margin: 0 4px 0 0;
padding: 0 20px 4px 0;
     background: url(images/custom/topmenu-r2.png) 100% 0 no-repeat;  
}

.tabs li a:hover .menu-left,
.tabs li:hover a .menu-left {}

.tabs ul li a.current .menu-left {
  background: url(images/custom/topmenu-l.png) 0 0 no-repeat;
}

.tabs li a:hover .menu-right,
.tabs li:hover a .menu-right {
     text-decoration: underline;
}

.tabs ul li a.current .menu-right {
  background: url(images/custom/topmenu-r.png) 100% 0 no-repeat;
}

.tabs li a:hover,
.tabs li.hover a,
.tabs li:hover a {

}

.tabs li:hover .sub,
.tabs li.hover .sub {
display: block;
}

.tabs li .sub {
display: none;
position: absolute;
top: 30px;
left: -3px;
width: 186px;
padding-top: 16px;
background: url(images/submenu_top.png) no-repeat;
}

.tabs li ul {
width: 186px;
height: auto;
margin: 0 0 0 0;
padding: 10px 8px 47px 15px;
list-style: none;
font-size: 14px;
     text-decoration: none;
     background: url(images/submenu_bg.png) 0 100% no-repeat;
}

.tabs li:hover li,
.tabs li.current li {
width: 100%;
padding: 0;
background: none !important;
}

.tabs li:hover li a,
.tabs li.current li a {
color: #263857;
background: none !important;
margin: -7px 0 0 0;
padding: 3px 3px 4px 8px;
line-height: 20px;
width: 164px;
}

.tabs li:hover li a:hover,
.tabs li.current li a:hover {
text-decoration: none;
line-height: 20px;
margin: -7px 0 0 0;
padding: 3px 3px 4px 8px;
color: #FFFFFF;
background: none !important;
}

/*IE*/
.tabs li li a:hover {
text-decoration: none;
line-height: 20px;
color: #FFFFFF;
background: none !important;
}
/**/

/* End of drop menu codes. */

There is a demo available here. Login details are in the news fader.

There is a download containing index.template.php, style.css and the drop menu images here.


Merry Christmas, people!  :cheers:
Logged
Using IE 6 on the internet is like urinating in a public swimming pool. It's rude,
there's no excuse for it, and anyone who does it should be ashamed of themselves.

Offline DjScrappy

  • Jr. Member
  • *
  • Posts: 10
    • Email
Re: DropDown menu
« Reply #5 on: Dec 06, 2008, 05:33:05 »
Thank You antechinus You Guys Are Great Here At Dzinerstudio :goodstuff: :goodstuff: cant wait for 20b4 And Merry Christmas To You antechinus  :cheers: :cheers:
Logged

Offline antechinus

  • Support Team
  • Hero Member
  • *
  • Posts: 2979
Re: DropDown menu
« Reply #6 on: Dec 06, 2008, 12:31:54 »
2 Beta 4 version.

Style.css is exactly the same as for 1.1.x so grab the code from my other post.

Index.template.php:

Find:

Code: [Select]
echo '
</head>
<body>';
}
Replace with:

Code: [Select]
echo '
    <script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
      var PreloadImages = new Array(
         "/images/submenu_top.png",
         "/images/submenu_bg.png"
      );

      var myImages = new Array();
      for(var i = 0; i < PreloadImages.length; i++)
      {
         myImages[i] = new Image();
         myImages[i].src = "'. $settings['theme_url'] .'" + PreloadImages[i];
      }
    // ]]></script>';

echo '
</head>
<body>';
}
Find:

Code: [Select]
// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
global $context, $settings, $options, $scripturl, $txt;

echo '
<div id="topmenu">
<ul>';

foreach ($context['menu_buttons'] as $act => $button)
echo '<li><a ', $button['active_button'] ? ' class="current"' : '' , ' href="', $button['href'], '"><span>', $button['title'], '</span></a></li>';

echo '
</ul>
</div>';
}
Replace with:

Code: [Select]
// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
global $context, $settings, $options, $scripturl, $txt;

echo '
<div class="tabs">
<ul>';
foreach ($context['menu_buttons'] as $act => $button)
{
echo '   <li><a ', $button['active_button'] ? ' class="current"' : '' , ' href="', $button['href'], '">
         <span class="menu-left"></span>
<span class="menu-right">' , $button['title'] , '</span></a>';

          //    Does this button have any subbuttons?
        if(!empty($button['sub_buttons']))
        {
            echo '
                             <div class="sub">
<ul>';
            foreach($button['sub_buttons'] as $sub_button)
                    echo '
                <li><a href="', $sub_button['href'], '">' , $sub_button['title'] , '</a></li>';
            echo '
                                 </ul>
</div>';     
         }

echo' </li>';

}

echo '
</ul>
</div>';

}
Grab the same zip from my demo forum but don't use the files because they are for 1.1.x. Just use the two images. :cheers:
« Last Edit: Dec 06, 2008, 12:36:08 by antechinus »
Logged
Using IE 6 on the internet is like urinating in a public swimming pool. It's rude,
there's no excuse for it, and anyone who does it should be ashamed of themselves.

Offline GonZa-Design

  • Newbie
  • *
  • Posts: 8
Re: DropDown menu
« Reply #7 on: Dec 06, 2008, 13:58:05 »
Thanks Man Thanks
Logged

Offline DjScrappy

  • Jr. Member
  • *
  • Posts: 10
    • Email
Re: DropDown menu
« Reply #8 on: Dec 07, 2008, 06:17:11 »
Thanks To Everybody Who Has Made These Themes They Are Awsome And To antechinus For Making The Edits For The Drop Down Menus, MERRY CHRISTMAS TO ALL  :cheers: :cheers: :cheers: :cheers: And P.S. I Also Worked Out Putting My Sub Menus In And It Works Awsome Thank You Everybody  :goodstuff: :goodstuff:
« Last Edit: Dec 07, 2008, 08:29:08 by DjScrappy »
Logged

Offline sudhakar

  • Jr. Member
  • *
  • Posts: 55
  • Acumen
    • IT Acumens
    • Email
Re: DropDown menu
« Reply #9 on: Dec 08, 2008, 16:21:24 »
For the First Time, I feel  :rock: ( Rocking ).

Cool Christmas Theme with Cool Menu.

Antechinus made it more simply .

So Happy that everything worked perfectly. And My Site got a Good Look after the Drop Down Addon.

 :clappingani: Thanks a Lot to Dziner Studio Support Team.  :kiss:
Logged
Pages: [1] 2 3  All   Go Up
« previous next »