menú desplegable característica de DILBER MC tema

[nicko1976]

Live Demo

UserName: Test
Password: 123456



index.template.php
Buscar:

Code Select Expand

// Show the [home] button.
echo'
<td align="center" class="menubg' , $current_action == 'home' ? '2' : '' , '">
<a href="', $scripturl, '">' , $txt[103] , '</a>
</td>';
// Show the [help] button.
echo'
<td align="center" class="menubg' , $current_action == 'help' ? '2' : '' , '">

<a href="', $scripturl, '?action=help">' , $txt[119] , '</a>
</td>';
// How about the [search] button?
if ($context['allow_search'])
echo'
<td align="center" class="menubg' , $current_action == 'search' ? '2' : '' , '">
<a href="', $scripturl, '?action=search">' , $txt[182] , '</a>
</td>';
// Is the user allowed to administrate at all? ([admin])
if ($context['allow_admin'])
echo'
<td align="center" class="menubg' , $current_action == 'admin' ? '2' : '' , '">
<a href="', $scripturl, '?action=admin">' , $txt[2] , '</a>
</td>';
// Edit Profile... [profile]
if ($context['allow_edit_profile'])
echo'
<td align="center" class="menubg' , $current_action == 'profile' ? '2' : '' , '">
<a href="', $scripturl, '?action=profile">' , $txt[79] , '</a>
</td>';
// Go to PM center... [pm]
if ($context['user']['is_logged'] && $context['allow_pm'])
echo'
<td align="center" class="menubg' , $current_action == 'pm' ? '2' : '' , '">
<a href="', $scripturl, '?action=pm">' , $txt['pm_short'] , ' ', $context['user']['unread_messages'] > 0 ? '[<strong>'. $context['user']['unread_messages'] . '</strong>]' : '' , '</a>
</td>';
// The [calendar]!
if ($context['allow_calendar'])
echo'
<td align="center" class="menubg' , $current_action == 'calendar' ? '2' : '' , '">
<a href="', $scripturl, '?action=calendar">' , $txt['calendar24'] , '</a>
</td>';
// the [member] list button
if ($context['allow_memberlist'])
echo'
<td align="center" class="menubg' , $current_action == 'mlist' ? '2' : '' , '">
<a href="', $scripturl, '?action=mlist">' , $txt[331] , '</a>
</td>';

// If the user is a guest, show [login] button.
if ($context['user']['is_guest'])
echo'
<td align="center" class="menubg' , $current_action == 'login' ? '2' : '' , '">
<a href="', $scripturl, '?action=login">' , $txt[34] , '</a>
</td>';
// If the user is a guest, also show [register] button.
if ($context['user']['is_guest'])
echo'
<td align="center" class="menubg' , $current_action == 'register' ? '2' : '' , '">
<a href="', $scripturl, '?action=register">' , $txt[97] , '</a>
</td>';
// Otherwise, they might want to [logout]...
if ($context['user']['is_logged'])
echo'
<td align="center" class="menubg' , $current_action == 'logout' ? '2' : '' , '">
<a href="', $scripturl, '?action=logout;sesc=', $context['session_id'], '">' , $txt[108] , '</a>
</td>';

Sustituir:

Code Select Expand

echo '
<td>
<div id="menu">
<ul class="menu">

<li class="level1"><a href="', $scripturl, '" class="level1"><span><span class="title">' , $txt[103] , '</span></span></a></li>

<li class="level1"><a href="', $scripturl, '?action=help" class="level1"><span><span class="title">' , $txt[119] , '</span></span></a></li>';

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

// Is the user allowed to administrate at all? ([admin])
if ($context['allow_admin'])
echo '
                            <li class="level1"><a href="', $scripturl, '?action=admin" class="level1"><span><span class="title">' , $txt[2] , '</span></span></a></li>';
                             
// Edit Profile... [profile]
if ($context['allow_edit_profile'])
echo '
                            <li class="level1 parent"><a href="', $scripturl, '?action=profile" class="level1 parent"><span><span class="title">' , $txt[79] , '</span></span></a>
                            <ul class="level2">
    <li class="level2"><a href="', $scripturl, '?action=profile" class="level2"><span>' , $txt['hcm_summary'] , '</span></a></li>
    <li class="level2"><a href="', $scripturl, '?action=profile;sa=account" class="level2"><span>' , $txt['hcm_account'] , '</span></a></li>
    <li class="level2"><a href="', $scripturl, '?action=profile;sa=forumProfile" class="level2"><span>' , $txt['hcm_forumProfile'] , '</span></a></li>
</ul></li>';


// Go to PM center... [pm]
if ($context['user']['is_logged'] && $context['allow_pm'])
echo '
                            <li class="level1 parent"><a href="', $scripturl, '?action=pm" class="level1 parent"><span><span class="title">' , $txt['pm_short'] , ' ', $context['user']['unread_messages'] > 0 ? '[<strong>'. $context['user']['unread_messages'] . '</strong>]' : '' , '</span></span></a>
                            <ul class="level2">
    <li class="level2"><a href="', $scripturl, '?action=pm" class="level2"><span>' , $txt['hcm_readmessages'] , '</span></a></li>
    <li class="level2"><a href="', $scripturl, '?action=pm;sa=send" class="level2"><span>' , $txt['hcm_sendmessage'] , '</span></a></li>
</ul></li>';


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


// the [member] list button
if ($context['allow_memberlist'])
echo '
                            <li class="level1 parent"><a href="', $scripturl, '?action=mlist" class="level1 parent"><span><span class="title">' , $txt[331] , '</span></span></a>
                            <ul class="level2">
    <li class="level2"><a href="', $scripturl, '?action=mlist" class="level2"><span>' , $txt['hcm_viewmembers'] , '</span></a></li>
    <li class="level2"><a href="', $scripturl, '?action=mlist;sa=search" class="level2"><span>' , $txt['hcm_searchmembers'] , '</span></a></li>
</ul></li>';

                           
// If the user is a guest, show [login] button.
if ($context['user']['is_guest'])
echo '
                            <li class="level1"><a href="', $scripturl, '?action=login" class="level1"><span><span class="title">' , $txt[34] , '</span></span></a></li>';
                           
// If the user is a guest, also show [register] button.
if ($context['user']['is_guest'])
echo '
                            <li class="level1"><a href="', $scripturl, '?action=register" class="level1"><span><span class="title">' , $txt[97] , '</span></span></a></li>';
                           
// Otherwise, they might want to [logout]...
if ($context['user']['is_logged'])
echo '
    <li class="level1"><a href="', $scripturl, '?action=logout;sesc=', $context['session_id'], '" class="level1"><span><span class="title">' , $txt[108] , '</span></span></a></li>';

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



languages/Modifications.english.php
Buscar:

Code Select Expand

?>

Añadir antes:

Code Select Expand

$txt['hcm_summary'] = 'Summary';
$txt['hcm_account'] = 'Account Settings';
$txt['hcm_forumProfile'] = 'Forum Profile';
$txt['hcm_readmessages'] = 'Read Your Messages';
$txt['hcm_sendmessage'] = 'Send A Message';
$txt['hcm_viewmembers'] = 'View The Memberlist';
$txt['hcm_searchmembers'] = 'Search For Members';



Style.css
Añadir al final:

Code Select Expand

/*
* Drop Down Menu Feature of DilberMC Theme
*/


div#menu {
position: absolute;
top: 145px;
left: 40px;
z-index: 11;
height: 40px;
background: url('images/sep_black.png') no-repeat 0 0;; padding-left:1px; padding-right:0px; padding-top:0px; padding-bottom:0px
}

div#menu ul {
margin: 0px;
padding: 0px;
list-style: none;
float: left; 
}

div#menu li {
position: relative;
margin: 0px;
padding: 0px;
display: block;
float: left;
z-index: 5; 
font-weight: bold;
}

div#menu li a, #menu li span.separator {
height: 40px;
display: block;
float: left;
line-height: 32px;
text-decoration: none;
color: #FFFFFF;
}

div#menu li span { 
display: block;
}

div#menu li span { 
background-repeat: no-repeat;
background-position: 95% 0px;
}

div#menu a:hover, div#menu span.separator:hover, div#menu span.sfhover { 
color: #D2D2D2;
}

div#menu li.active { 
font-weight: bold;
}

div#menu li.active ul { 
font-weight: normal;
}

div#menu li.parent span.separator { 
cursor: pointer;
}


div#menu ul.menu {
padding-right: 1px;
background: url('images/sep_white.png') no-repeat 100% 0;
}

div#menu li.level1 {
background: url('images/sep_white.png') no-repeat 0 0;
}

div#menu a.level1, div#menu span.level1 {
background: url('images/sep_black.png') no-repeat 100% 0;
color: #FFFFFF;
font-size: 100%;

}

div#menu a.level1 span, div#menu span.level1 span {
padding: 7px 20px 0px 20px;
}

div#menu li:hover a.level1, div#menu li.sfhover a.level1, div#menu li:hover span.level1, div#menu li.sfhover span.level1 { 
color: #CFD7DE;
}

div#menu li.active a.level1, div#menu li.active span.level1 { 
color: #aa1428;
font-weight: bold;
}


div#menu a.level1 span.title, div#menu span.level1 span.title{
padding: 0px;
}


div#menu a.level1 span.sub, div#menu span.level1 span.sub {
padding: 0px;
font-size: 60%;
font-weight: normal;
color: #969696;
margin-top: -6px;
line-height: 10px;
}


div#menu li:hover a.level1 span.sub, div#menu li:hover span.level1 span.sub, div#menu li.sfhover a.level1 span.sub, div#menu li.sfhover span.level1 span.sub {
color: #ffffff;
}


div#menu ul.menu ul {
position: absolute;
top: 40px;
left: -999em; 
width: 165px;
font-size: 88%;
}

div#menu li:hover ul, div#menu li.sfhover ul {
left: 0px; 
z-index: 100;
}

div#menu li.level1 li {
    width: 100%; 
text-indent: 15px;
}

div#menu li.level1 li a, div#menu li.level1 li span.separator{
height: 25px;
padding: 0px;
margin: 0px 1px;;
float: none; 
display: block;
line-height: 25px
}



style_lightblue.css
añadir al final:

Code Select Expand

/* Drop Down Menu Feature of DilberMC Theme */

div#menu a:hover, div#menu span.separator:hover, div#menu span.sfhover { 
color: #E0E0FF;
}

div#menu li:hover a.level1, div#menu li.sfhover a.level1, div#menu li:hover span.level1, div#menu li.sfhover span.level1 { 
color: #E0E0FF;
}

div#menu ul.menu ul {
background: url('images/lightblue/menu_bg.png') no-repeat 0 100%;; padding-left:0px; padding-right:0px; padding-top:0px; padding-bottom:10px
}

div#menu li.level1 li a, div#menu li.level1 li span.separator{
background: url('images/lightblue/menu_item.png') no-repeat 100% 0;
}



style_lightbrown.css
añadir al final:

Code Select Expand

/* Drop Down Menu Feature of DilberMC Theme */

div#menu a:hover, div#menu span.separator:hover, div#menu span.sfhover { 
color: #F8F5E1;
}

div#menu li:hover a.level1, div#menu li.sfhover a.level1, div#menu li:hover span.level1, div#menu li.sfhover span.level1 { 
color: #F8F5E1;
}

div#menu ul.menu ul {
background: url('images/lightbrown/menu_bg.png') no-repeat 0 100%;; padding-left:0px; padding-right:0px; padding-top:0px; padding-bottom:10px
}

div#menu li.level1 li a, div#menu li.level1 li span.separator{
background: url('images/lightbrown/menu_item.png') no-repeat 100% 0;
}



style_lightgolden.css
añadir al final:

Code Select Expand

/* Drop Down Menu Feature of DilberMC Theme */

div#menu a:hover, div#menu span.separator:hover, div#menu span.sfhover { 
color: #FCFFE0;
}

div#menu li:hover a.level1, div#menu li.sfhover a.level1, div#menu li:hover span.level1, div#menu li.sfhover span.level1 { 
color: #FCFFE0;
}

div#menu ul.menu ul {
background: url('images/lightgolden/menu_bg.png') no-repeat 0 100%;; padding-left:0px; padding-right:0px; padding-top:0px; padding-bottom:10px
}

div#menu li.level1 li a, div#menu li.level1 li span.separator{
background: url('images/lightgolden/menu_item.png') no-repeat 100% 0;
}



style_lightgreen.css
añadir al final:

Code Select Expand

/* Drop Down Menu Feature of DilberMC Theme */

div#menu a:hover, div#menu span.separator:hover, div#menu span.sfhover { 
color: #DDFCF2;
}

div#menu li:hover a.level1, div#menu li.sfhover a.level1, div#menu li:hover span.level1, div#menu li.sfhover span.level1 { 
color: #DDFCF2;
}

div#menu ul.menu ul {
background: url('images/lightgreen/menu_bg.png') no-repeat 0 100%;; padding-left:0px; padding-right:0px; padding-top:0px; padding-bottom:10px
}

div#menu li.level1 li a, div#menu li.level1 li span.separator{
background: url('images/lightgreen/menu_item.png') no-repeat 100% 0;
}



style_lightlilac.css
añadir al final:

Code Select Expand

/* Drop Down Menu Feature of DilberMC Theme */

div#menu a:hover, div#menu span.separator:hover, div#menu span.sfhover { 
color: #FBE6FF;
}

div#menu li:hover a.level1, div#menu li.sfhover a.level1, div#menu li:hover span.level1, div#menu li.sfhover span.level1 { 
color: #FBE6FF;
}

div#menu ul.menu ul {
background: url('images/lightlilac/menu_bg.png') no-repeat 0 100%;; padding-left:0px; padding-right:0px; padding-top:0px; padding-bottom:10px
}

div#menu li.level1 li a, div#menu li.level1 li span.separator{
background: url('images/lightlilac/menu_item.png') no-repeat 100% 0;
}



style_lightnavy.css
añadir al final:

Code Select Expand

/* Drop Down Menu Feature of DilberMC Theme */

div#menu a:hover, div#menu span.separator:hover, div#menu span.sfhover { 
color: #E3DEFA;
}

div#menu li:hover a.level1, div#menu li.sfhover a.level1, div#menu li:hover span.level1, div#menu li.sfhover span.level1 { 
color: #E3DEFA;
}

div#menu ul.menu ul {
background: url('images/lightnavy/menu_bg.png') no-repeat 0 100%;; padding-left:0px; padding-right:0px; padding-top:0px; padding-bottom:10px
}

div#menu li.level1 li a, div#menu li.level1 li span.separator{
background: url('images/lightnavy/menu_item.png') no-repeat 100% 0;
}



style_lightolive.css
añadir al final:

Code Select Expand

/* Drop Down Menu Feature of DilberMC Theme */

div#menu a:hover, div#menu span.separator:hover, div#menu span.sfhover { 
color: #E7F8E1;
}

div#menu li:hover a.level1, div#menu li.sfhover a.level1, div#menu li:hover span.level1, div#menu li.sfhover span.level1 { 
color: #E7F8E1;
}

div#menu ul.menu ul {
background: url('images/lightolive/menu_bg.png') no-repeat 0 100%;; padding-left:0px; padding-right:0px; padding-top:0px; padding-bottom:10px
}

div#menu li.level1 li a, div#menu li.level1 li span.separator{
background: url('images/lightolive/menu_item.png') no-repeat 100% 0;
}



style_lightred.css
añadir al final:

Code Select Expand

/* Drop Down Menu Feature of DilberMC Theme */

div#menu a:hover, div#menu span.separator:hover, div#menu span.sfhover { 
color: #FFE4E0;
}

div#menu li:hover a.level1, div#menu li.sfhover a.level1, div#menu li:hover span.level1, div#menu li.sfhover span.level1 { 
color: #FFE4E0;
}

div#menu ul.menu ul {
background: url('images/lightred/menu_bg.png') no-repeat 0 100%;; padding-left:0px; padding-right:0px; padding-top:0px; padding-bottom:10px
}

div#menu li.level1 li a, div#menu li.level1 li span.separator{
background: url('images/lightred/menu_item.png') no-repeat 100% 0;
}



style_lightrose.css
añadir al final:

Code Select Expand

/* Drop Down Menu Feature of DilberMC Theme */

div#menu a:hover, div#menu span.separator:hover, div#menu span.sfhover { 
color: #FFE6EF;
}

div#menu li:hover a.level1, div#menu li.sfhover a.level1, div#menu li:hover span.level1, div#menu li.sfhover span.level1 { 
color: #FFE6EF;
}

div#menu ul.menu ul {
background: url('images/lightrose/menu_bg.png') no-repeat 0 100%;; padding-left:0px; padding-right:0px; padding-top:0px; padding-bottom:10px
}

div#menu li.level1 li a, div#menu li.level1 li span.separator{
background: url('images/lightrose/menu_item.png') no-repeat 100% 0;
}



style_lightsilver.css
añadir al final:

Code Select Expand

/* Drop Down Menu Feature of DilberMC Theme */

div#menu a:hover, div#menu span.separator:hover, div#menu span.sfhover { 
color: #E7E7F2;
}

div#menu li:hover a.level1, div#menu li.sfhover a.level1, div#menu li:hover span.level1, div#menu li.sfhover span.level1 { 
color: #E7E7F2;
}

div#menu ul.menu ul {
background: url('images/lightsilver/menu_bg.png') no-repeat 0 100%;; padding-left:0px; padding-right:0px; padding-top:0px; padding-bottom:10px
}

div#menu li.level1 li a, div#menu li.level1 li span.separator{
background: url('images/lightsilver/menu_item.png') no-repeat 100% 0;
}



style_lightturquoise.css
añadir al final:

Code Select Expand

/* Drop Down Menu Feature of DilberMC Theme */

div#menu a:hover, div#menu span.separator:hover, div#menu span.sfhover { 
color: #DCF5F5;
}

div#menu li:hover a.level1, div#menu li.sfhover a.level1, div#menu li:hover span.level1, div#menu li.sfhover span.level1 { 
color: #DCF5F5;
}

div#menu ul.menu ul {
background: url('images/lightturquoise/menu_bg.png') no-repeat 0 100%;; padding-left:0px; padding-right:0px; padding-top:0px; padding-bottom:10px
}

div#menu li.level1 li a, div#menu li.level1 li span.separator{
background: url('images/lightturquoise/menu_item.png') no-repeat 100% 0;
}



style_lightviolet.css
añadir al final:

Code Select Expand

/* Drop Down Menu Feature of DilberMC Theme */

div#menu a:hover, div#menu span.separator:hover, div#menu span.sfhover { 
color: #EDE8F7;
}

div#menu li:hover a.level1, div#menu li.sfhover a.level1, div#menu li:hover span.level1, div#menu li.sfhover span.level1 { 
color: #EDE8F7;
}

div#menu ul.menu ul {
background: url('images/lightviolet/menu_bg.png') no-repeat 0 100%;; padding-left:0px; padding-right:0px; padding-top:0px; padding-bottom:10px
}

div#menu li.level1 li a, div#menu li.level1 li span.separator{
background: url('images/lightviolet/menu_item.png') no-repeat 100% 0;
}

Finally upload the attached images to your theme file.



IE and IE6 Fix
index.template.php
encontrar:

Code Select Expand

/* Internet Explorer 4/5 and Opera 6 just don't do font sizes properly. (they are big...)

antes de añadir:

Code Select Expand

// for ie!
if($context['browser']['is_ie'])
echo '
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/ie.css?fin1" />';

// for ie6!
if($context['browser']['is_ie6'])
echo '
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/ie6.css?fin1" />';

y, a continuación, subir el adjunto estilos (ie.css y ie6.css) a su archivo de tema



este post corresponde a
Autor Hoochie Coochie Man

[sneijder23]

Hay un par de temas con este menu ya pero gracias de todos modos por compartirlo

[nicko1976]

Hay un par de temas con este menu ya pero gracias de todos modos por compartirlo

Ok,nunca esta demas recordarlo

[WwW_®]

muchas gracias por el dato, se vé muy bien 

[marcee]

esto se puede hacer en otros themes? gracias desde luego

saludos

[Nibogo]

Excelente muy bontio , lastima no haberlo conocido antes y haber implementado otro

[T-Bag]

Alguien sabe adaptar, o sabe si hay algún menu igual que este adaptado para el theme default?

[franklinrony]

creo que fue la modificacion  hizo hoochi coochie hace un rato, muy bueno

[4Kstore]

Muy bueno la verdad, se agradece!

[1van10]

muchas gracias, aunque el SlickPro Graphite ya lo lleva

[Drogocop]

Gracias por la data 

[Ƨķǐρƥȝř™]

Excelente... A probarlo... Gracias...

[T-Bag]

creo que fue la modificacion  hizo hoochi coochie hace un rato, muy bueno

No, para el theme default no sirve. Es para el Dilber. Si alguien sabe como ponerlo en el Default estaría muy agradecido. Saludos

[HotJoint]

funciona en cualquier theme o solo en el dilber?

[HotJoint]

Ups ya lo contestaron arriba, perdon por la falta de atención de mi parte