Drop down selection on the index..

shadow82x · September 17, 2007, 09:05:28 PM

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.

m3talc0re · September 17, 2007, 10:34:21 PM

Try this one:
http://www.dynamicdrive.com/dynamicindex1/chrome/index.htm

shadow82x · September 18, 2007, 08:58:47 PM

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

I added this to style .css

Code Select

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

codenaught · September 18, 2007, 09:47:04 PM

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

Code Select

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

Code Select

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

shadow82x · September 18, 2007, 09:59:23 PM

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

Code Select

<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

codenaught · 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
<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.

shadow82x · September 18, 2007, 10:16:37 PM

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

Code Select

// 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>' : '';

codenaught · September 18, 2007, 10:21:46 PM

That's right, you are using 2.0.

Check in setupMenuContext in Sources/Subs.php.

shadow82x · September 18, 2007, 10:34:29 PM

ok so I added the main codes...

Code Select

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

codenaught · September 18, 2007, 11:01:23 PM

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:

Code Select

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

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

Code Select

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

Code Select


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

shadow82x · September 20, 2007, 08:32:42 PM

Thanks aka I am trying a mod like that and the codes really helped. I will report back status.

shadow82x · September 20, 2007, 09:09:05 PM

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

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

Code Select

    // 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>';

News:

Drop down selection on the index..