Slide menu

Started by Dzonny, September 25, 2010, 03:18:12 PM

Previous topic - Next topic

Dzonny

http://www.smf-hr.com/forum//index.php?topic=412.0

1. Otvorite CSS i dodajte kod

.mainmenuslide {
height: 29px;
width:1000px;
    background: url(images/background_main.png) repeat-x top;
padding: 15px 0 15px 0;
margin: 0 -10px 0;
position: relative;
    }
.mainmenuslide li {
padding: 16px 0 11px 25px;
margin: -18px 0 0 9px;
float: left;
list-style: none;
}
.mainmenuslide li.back .left {
background: url(images/hover_main.png) no-repeat top left;
padding: 0px 0 22px 0;
height: 35px;

margin-right: 24px;
}
.mainmenuslide li.back {
background: url(images/hover_main.png) no-repeat right -52px;
width: 9px; height: 30px; padding: 0px 0 22px 0;
    z-index: 1; margin: -12px 0 0 8px; position: absolute;
}

.mainmenuslide li a {
    color: #666666;
font: bold 14px arial;
    top: 7px;
z-index: 2;
float: left;
    height: 35px;
position: relative;
    margin: auto 10px;
outline: none;   
    }
.mainmenuslide li a:hover {
    color: #ffffff;
font: bold 14px arial;
    top: 7px;
z-index: 2;
float: left;
    height: 35px;
position: relative;
    margin: auto 10px;
outline: none;   
    }
.mainmenuslide li a.active{
    color: #ffffff;
font: bold 14px arial;
    top: 7px;
z-index: 2;
float: left;
    height: 35px;
position: relative;
    margin: auto 10px;
outline: none;   
    }


Slike potrebne :




2. Otvorite Index.templet.php

Prvo odite do echo' </head>
i ispred toga dodajte
echo'
<script type="text/javascript" src="', $settings['theme_url'], '/js/jquery-1.2.3.min.js"></script>
<script type="text/javascript" src="', $settings['theme_url'], '/js/jquery.easing.min.js"></script>
<script type="text/javascript" src="', $settings['theme_url'], '/js/jquery.mainmenuslide.js"></script>
';

echo"
<script  type=\"text/javascript\">
        $(function() {
            $(\"ul\").mainmenuslide({
                fx: \"backout\",
                speed: 700,

            });
        });
</script>";


Potrebne JS skripte (ubacite ih u pocetan folder teme):

http://www.mediafire.com/?akgvllfxc4ovdpa


3. Nadite
// Show the [home] button.

i naci ce te cijeli kod

// Show the start of the tab section.

echo '


    <ul>';

// Show the [home] button.
echo '<li><a' , $current_action=='home' ? ' class="active"' : '' , ' href="', $scripturl, '?action=home" >' , $txt[103] , '</a></li>';

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

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

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

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

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

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

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

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

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

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

echo '
</ul>

';
}



Na pocetku

<ul>'; zamjeniti sa <ul class="mainmenuslide">';


Napomena: obavezno maknuti default meu teme :D

Ukoliko imate problema pitajte u ovu temu :D


DEMO: http://tutorials4all.org/crogfx/

Tut by: galeb

Masterd

Odličan tutorijal! Zahvala tebi i galebu! :D

CaSiNo RoYaLe

Sve uradim kako trba,no pokaže Template Parse Error  :'(

Masterd


Forbs

Super savjet.Sviđa mi se..Hvala na tutorialu :D

galeb

Moras  malo pogledat... ovo je radeno u mistic jade temi, te ide ovako... Obavezno moras maknuti obican toolbar i malo prilagoditi ako nesto nije dobro ;) (a tebi je vjerovatno problem kod java skripte, jer se to i meni desavalo.... mmoras malo prilagoditi kod oko javaskripte ;))

Dzonny sry za onoliko poruka :P

Advertisement: