News:

Bored?  Looking to kill some time?  Want to chat with other SMF users?  Join us in IRC chat or Discord

Main Menu

Drop down selection on the index..

Started by shadow82x, September 17, 2007, 09:05:28 PM

Previous topic - Next topic

shadow82x

I'm just curious if there are any codes or anyway to get the drop downs on the index. From what I see its from

  • index.template.php
  • style.css
But I'm not quite sure how to get it. I do not mean an exact replica of the drop down on here but something like it without clicking and menus appearing.
Colin B
Former Spammer, Customize, & Support Team Member

m3talc0re

The real hell is your life gone wrong.

shadow82x

OK I tried that out but am rather confused considering I know minimal css.

I added this to style .css

.chromestyle{
width: 99%;
font-weight: bold;
}

.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.chromestyle ul{
border: 1px solid #BBB;
width: 100%;
background: url(chromebg.gif) center center repeat-x; /*THEME CHANGE HERE*/
padding: 4px 0;
margin: 0;
text-align: center; /*set value to "left", "center", or "right"*/
}

.chromestyle ul li{
display: inline;
}

.chromestyle ul li a{
color: #494949;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-right: 1px solid #DADADA;
}

.chromestyle ul li a:hover{
background: url(chromebg-over.gif) center center repeat-x; /*THEME CHANGE HERE*/
}

.chromestyle ul li a[rel]:after{ /*HTML to indicate drop down link*/
content: " v";
/*content: " " url(downimage.gif); /*uncomment this line to use an image instead*/
}


/* ######### Style for Drop Down Menu ######### */

.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4); /*Add Shadow in IE. Remove if desired*/
}


.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: black;
}

* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}

.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #F0F0F0;
}


But I'm unsure of what to add in index.template.php...
Colin B
Former Spammer, Customize, & Support Team Member

codenaught

It's really not that hard. :)

Copy the directories from the zip download file provided on that site (with the files inside of it) to the Themes/<theme_name> directory.

Then somewhere in the <head> tags of index.template.php, add (in an echo statement):

<link rel="stylesheet" type="text/css" href="' . $settings['theme_url'] . '/' . 'chrometheme/chromestyle.css" />
<script type="text/javascript" src="' . $settings['theme_url'] . '/' . 'chromejs/chrome.js">


For the menu code, well just follow the example given on the site, here is some menu items to hopefully give you a framework of how it is done:

The code that goes in template_menu() could look something like this:

echo '
<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="' . $scripturl . '">Home</a></li>
<li><a href="' . $scripturl . '?action=help">Help</a></li>
<li><a href="#" rel="dropmenu1">Mods</a></li>
' . ($context['user']['is_admin'] ? '<li><a href="' . $scripturl . '?action=admin">Admin</a></li>' : '') . '
</ul>
</div>

<!--1st drop down menu -->
<div id="dropmenu1" class="dropmenudiv">
<a href="' . $scripturl . '?action=arcade">Arcade</a>
<a href="' . $scripturl . '?action=shop">Shop</a>
<a href="' . $scripturl . '?action=invite">Invite</a>
</div>

<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>';
Dev Consultant
Former SMF Doc Coordinator

shadow82x

#4
Hmmm... I got the css.

Than I try to add that code it creates the chrome drop down. And not enough links. I suppose you add another link you just add

<li><a href="' . $scripturl . '?action=Index Name">Nav Name</a></li>

Than delete the other index navigation bar?

Edit: I'm a bit confused on how to add/find all the action names I only found search/help in index.template.php
Colin B
Former Spammer, Customize, & Support Team Member

codenaught

The action names are all there in template_menu, they really aren't hard to find.

See the comments [Home], [Search], [Profile] and right below that are snippets for the code for the link which include the action names.

If you don't understand the dropdown box logic, just take a closer look at it:

Quote<li><a href="#" rel="dropmenu1">Mods</a></li>
rel is added to the parent item that is a drop down item.

Quote<!--1st drop down menu -->
<div id="dropmenu1" class="dropmenudiv">
Later down in the code you add list items that associate themselves with the list item above, matching the rel="" and id="" of the two.

Dev Consultant
Former SMF Doc Coordinator

shadow82x

#6
Quote from: akabugeyes on September 18, 2007, 10:10:04 PM
The action names are all there in template_menu, they really aren't hard to find.

See the comments [Home], [Search], [Profile] and right below that are snippets for the code for the link which include the action names.

If you don't understand the dropdown box logic, just take a closer look at it:

Quote<li><a href="#" rel="dropmenu1">Mods</a></li>
rel is added to the parent item that is a drop down item.

Quote<!--1st drop down menu -->
<div id="dropmenu1" class="dropmenudiv">
Later down in the code you add list items that associate themselves with the list item above, matching the rel="" and id="" of the two.


I dont see where action is defined...

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

// Are we using right-to-left orientation?
if ($context['right_to_left'])
{
$first = 'last';
$last = 'first';
}
else
{
$first = 'first';
$last = 'last';
}

// Show the start of the tab section.
echo '
<table cellpadding="0" cellspacing="0" border="0" style="margin-left: 10px;">
<tr>
<td class="maintab_' , $first , '">&nbsp;</td>';

foreach($context['menu_buttons'] AS $act => $button)
echo ($button['active_button'] || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , ' <td valign="top" class="maintab_', $button['active_button'] ? 'active_back' : 'back', '">
<a href="', $button['href'], '">', $button['title'], '</a>
</td>', $button['active_button'] ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

Colin B
Former Spammer, Customize, & Support Team Member

codenaught

That's right, you are using 2.0.

Check in setupMenuContext in Sources/Subs.php.
Dev Consultant
Former SMF Doc Coordinator

shadow82x

ok so I added the main codes...

    // Show the menu here, according to the menu sub template.
    echo '
<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="' . $scripturl . '">Home</a></li>
<li><a href="' . $scripturl . '?action=help">Help</a></li>
<li><a href="#" rel="dropmenu1">Profile</a></li>
' . ($context['user']['is_admin'] ? '<li><a href="' . $scripturl . '?action=admin">Admin</a></li>' : '') . '
</ul>
</div>

Now how do I manage/set a code for the choices I want under each one like to this site. Like under profile I can go to.. summary. ect.
Colin B
Former Spammer, Customize, & Support Team Member

codenaught

That was what I was trying to explain in my earlier post - http://www.simplemachines.org/community/index.php?topic=195417.msg1245327#msg1245327. If you look carefully at the examples, you should be able to figure out the logic behind it, I did and this is the first time I ever saw the code.

Basically all the root menu items go in the first div, that includes ones with dropdowns and ones without them:

<div class="chromestyle" id="chromemenu">

For each item that will have a dropdown, add it like this:

<li><a href="#" rel="dropmenu1">Mods</a></li>

Then after the closing of the div with all the major root elements, open new divs that define each menu item that has a dropdown:


<!--1st drop down menu -->
<div id="dropmenu1" class="dropmenudiv">
<a href="' . $scripturl . '?action=arcade">Arcade</a>
<a href="' . $scripturl . '?action=shop">Shop</a>
<a href="' . $scripturl . '?action=invite">Invite</a>
</div>
All these items appear for the "Mods" dropdown. Why? Simply because the div id="" attribute matches the ref="" for the item listed in the first div.

Hope that clears some things up for you.
Dev Consultant
Former SMF Doc Coordinator

shadow82x

Thanks aka I am trying a mod like that and the codes really helped. I will report back status.
Colin B
Former Spammer, Customize, & Support Team Member

shadow82x

I'm not quite sure what I'm doing wrong now but I switched to blue tabs...

http://www.dynamicdrive.com/dynamicindex1/droptabmenu.htm

    // Show the menu here, according to the menu sub template.
echo '
<div class="chromestyle" id="bluetabs">
<ul>
<li><a href="http://egadforums.com/index.php">Home</a></li>
<li><a href="http://egadforums.com/index.php?action=help">Help</a></li>
<li><a href="http://egadforums.com/index.php?action=search">Search</a></li>
<li><a href="http://egadforums.com/index.php?action=profile" rel="dropmenu1">Profile</a></li>
<li><a href="http://egadforums.com/index.php?action=pm" rel="dropmenu2">My Messages</a></li>
<li><a href="http://egadforums.com/index.php?action=calendar">Calendar</a></li>
<li><a href="http://egadforums.com/index.php?action=mlist">Members</a></li>
<li><a href="http://egadforums.com/index.php?action=logout">Logout</a></li>
</ul>
</div>

' . ($context['user']['is_admin'] ? '<li><a href="' . $scripturl . '?action=admin">Admin</a></li>' : '') . '
</ul>
</div>

<!--1st drop down menu -->
<div id="dropmenu1" class="dropmenudiv">
<a href="http://egadforums.com/index.php?action=profile;sa=account">Account Settings</a>
<a href="http://egadforums.com/index.php?action=profile;sa=forumProfile">Forum Profile</a>
<a href="http://egadforums.com/index.php?action=profile;sa=summary">Profile Settings</a>
</div>

<!--2nd drop down menu -->
<div id="dropmenu2" class="dropmenudiv">
<a href="http://egadforums.com/index.php?action=pm;sa=send">Send Private Message</a>
<a href="http://egadforums.com/index.php?action=pm;f=sent">Sent Messages</a>
<a href="http://egadforums.com/index.php?action=pm">Read Messages</a>
</div>

<script type="text/javascript">
ddtabmenu.css("bluetabs")
</script>';

Colin B
Former Spammer, Customize, & Support Team Member

Advertisement: