Advertisement:

Author Topic: Slide menu  (Read 7178 times)

Online Dzonny

  • Local Moderator
  • SMF Super Hero
  • *
  • Posts: 11,977
  • Gender: Male
  • No sleep...
    • dzontra.nikola on Facebook
    • Dzonny on GitHub
    • dzontranikola on LinkedIn
    • @opusteniforum on Twitter
    • Samo opusteno
Slide menu
« on: September 25, 2010, 03:18:12 PM »
http://www.smf-hr.com/forum//index.php?topic=412.0

1. Otvorite CSS i dodajte kod

Code: [Select]
.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
Code: [Select]
echo' </head> i ispred toga dodajte
Code: [Select]
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
Code: [Select]
// Show the [home] button.
i naci ce te cijeli kod

Code: [Select]
// 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

Code: [Select]
<ul>'; zamjeniti sa
Code: [Select]
<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

Offline Masterd

  • SMF Hero
  • ******
  • Posts: 3,921
  • Gender: Male
Re: Slide menu
« Reply #1 on: September 26, 2010, 04:56:13 AM »
Odličan tutorijal! Zahvala tebi i galebu! :D

Offline CaSiNo RoYaLe

  • SMF Hero
  • ******
  • Posts: 1,472
  • Gender: Male
  • vBulletin < SMF
Re: Slide menu
« Reply #2 on: September 29, 2010, 06:27:28 AM »
Sve uradim kako trba,no pokaže Template Parse Error  :'(

Offline Masterd

  • SMF Hero
  • ******
  • Posts: 3,921
  • Gender: Male
Re: Slide menu
« Reply #3 on: September 29, 2010, 08:32:05 AM »
Probaj pitati galeba.

Offline Forbs

  • Jr. Member
  • **
  • Posts: 393
Re: Slide menu
« Reply #4 on: October 04, 2010, 12:55:39 PM »
Super savjet.Sviđa mi se..Hvala na tutorialu :D

Offline galeb

  • Semi-Newbie
  • *
  • Posts: 78
Re: Slide menu
« Reply #5 on: October 20, 2010, 08:01:49 AM »
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