Ответить Новая тема Новый опрос 
Всего: 4 1 2 3 4 >
 Красивая менюшка
YellowDuck


Профессионал
Сообщений: 1054
Откуда: Ярославль
Регистрация: 29-09-2009


28-01-2010 04:54
Нашел в нете меню, которое хочу вставить в правый верхний угол шапки, но как это сделать правильно не знаю.
Меню лежит тут http://ruseller.com/lessons.php?rub=29&id=507
с css вроде все понятно, просто допишу в конце global.css от темы, прописав корректно адрес картинок
библиотеку jquery-1.3.2.js кину в соответствующую папку
Но вот как правильно вставить это:
Код:
<div class="header"></div>
        <ul id="navigation">
            <li class="home"><a href=""><span>Home</span></a></li>
            <li class="about"><a href=""><span>About</span></a></li>
            <li class="search"><a href=""><span>Search</span></a></li>
            <li class="photos"><a href=""><span>Photos</span></a></li>
            <li class="rssfeed"><a href=""><span>Rss Feed</span></a></li>
            <li class="podcasts"><a href=""><span>Podcasts</span></a></li>
            <li class="contact"><a href=""><span>Contact</span></a></li>
        </ul>

        <div class="info">
            <a class="dry" href="http://dryicons.com">Icons by DryIcons.com</a>
        </div>

        <script type="text/javascript" src="jquery-1.3.2.js"></script>
        <script type="text/javascript">
            $(function() {
                var d=300;
                $('#navigation a').each(function(){
                    $(this).stop().animate({
                        'marginTop':'-80px'
                    },d+=150);
                });

                $('#navigation > li').hover(
                function () {
                    $('a',$(this)).stop().animate({
                        'marginTop':'-2px'
                    },200);
                },
                function () {
                    $('a',$(this)).stop().animate({
                        'marginTop':'-80px'
                    },200);
                }
            );
            });
        </script>

в header.tpl не знаю
Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{$lang_iso}">
    <head>
    <meta name="google-site-verification" content="159vlRF19nayrAe3eD070JcJVeslX5Upi9LRDOoY6oY" />
        <base href="{$protocol}{$smarty.server.HTTP_HOST|escape:'htmlall':'UTF-8'}{$base_dir}" />
        <title>{$meta_title|escape:'htmlall':'UTF-8'}</title>
{if isset($meta_description) AND $meta_description}
        <meta name="description" content="{$meta_description|escape:htmlall:'UTF-8'}" />
{/if}
{if isset($meta_keywords) AND $meta_keywords}
        <meta name="keywords" content="{$meta_keywords|escape:htmlall:'UTF-8'}" />
{/if}
        <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
        <meta name="generator" content="PrestaShop" />
        <meta name="robots" content="{if isset($nobots)}no{/if}index,follow" />
        <link rel="icon" type="image/vnd.microsoft.icon" href="{$img_ps_dir}favicon.ico" />
        <link rel="shortcut icon" type="image/x-icon" href="{$img_ps_dir}favicon.ico" />
{if isset($css_files)}
    {foreach from=$css_files key=css_uri item=media}
    <link href="{$css_uri}" rel="stylesheet" type="text/css" media="{$media}" />
    {/foreach}
{/if}
        <script type="text/javascript" src="{$base_dir}js/tools.js"></script>
        <script type="text/javascript">
            var baseDir = '{$base_dir}';
            var static_token = '{$static_token}';
            var token = '{$token}';
            var priceDisplayPrecision = {$priceDisplayPrecision*$currency->decimals};
        </script>
        <script type="text/javascript" src="{$base_dir}js/jquery/jquery-1.2.6.pack.js"></script>
        <script type="text/javascript" src="{$base_dir}js/jquery/jquery.easing.1.3.js"></script>
{if isset($js_files)}
    {foreach from=$js_files item=js_uri}
    <script type="text/javascript" src="{$js_uri}"></script>
    {/foreach}
{/if}
        {$HOOK_HEADER}
    </head>
    
    <body {if $page_name}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if}>
    {if !$content_only}
        <div id="page">

            <!-- Header -->
            <div>
                <h1 id="logo"><a href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}"><img src="{$img_ps_dir}logo1.png" alt="{$shop_name|escape:'htmlall':'UTF-8'}" /></a></h1>
                <div id="header">
                    {$HOOK_TOP}
                </div>
            </div>

            <!-- Left -->
            <div id="left_column" class="column">
                {$HOOK_LEFT_COLUMN}
            </div>

            <!-- Center -->
            <div id="center_column">
    {/if}


Подскажите в какую часть кода вставлять?
 



Интернет-магазин товаров для детей yellowduck.ru
Хороший хостинг для Prestashop и не только one-hosting.ru
Вне форума
ПМ Отправить эл.сообщение 
Щелкните, и это сообщение будет добавлено в ваш ответ как цитата Цитировать этот ответ
Алекс


Администратор
Сообщений: 4516
Откуда: Красноярск
Регистрация: 29-05-2009


28-01-2010 08:37
Код:
<!-- Header -->
            <div>
                <h1 id="logo"><a href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}"><img src="{$img_ps_dir}logo1.png" alt="{$shop_name|escape:'htmlall':'UTF-8'}" /></a></h1>
                <div id="header">



<!-- меню -->
<ul id="navigation">
            <li class="home"><a href=""><span>Home</span></a></li>
            <li class="about"><a href=""><span>About</span></a></li>
            <li class="search"><a href=""><span>Search</span></a></li>
            <li class="photos"><a href=""><span>Photos</span></a></li>
            <li class="rssfeed"><a href=""><span>Rss Feed</span></a></li>
            <li class="podcasts"><a href=""><span>Podcasts</span></a></li>
            <li class="contact"><a href=""><span>Contact</span></a></li>
        </ul>

        <div class="info">
            <a class="dry" href="">Icons\" target=\"_blank\">http://dryicons.com">Icons by DryIcons.com</a>
        </div>

{literal}
        <script type="text/javascript">
            $(function() {
                var d=300;
                $('#navigation a').each(function(){
                    $(this).stop().animate({
                        'marginTop':'-80px'
                    },d+=150);
                });

                $('#navigation > li').hover(
                function () {
                    $('a',$(this)).stop().animate({
                        'marginTop':'-2px'
                    },200);
                },
                function () {
                    $('a',$(this)).stop().animate({
                        'marginTop':'-80px'
                    },200);
                }
            );
            });
        </script>
{/literal}
<!-- меню -->



                    {$HOOK_TOP}
                </div>
            </div>
 
Вне форума
ПМ Отправить эл.сообщение 
Щелкните, и это сообщение будет добавлено в ваш ответ как цитата Цитировать этот ответ
YellowDuck


Профессионал
Сообщений: 1054
Откуда: Ярославль
Регистрация: 29-09-2009


28-01-2010 13:07
Алекс, спасибо, вечером попробую
 



Интернет-магазин товаров для детей yellowduck.ru
Хороший хостинг для Prestashop и не только one-hosting.ru
Вне форума
ПМ Отправить эл.сообщение 
Щелкните, и это сообщение будет добавлено в ваш ответ как цитата Цитировать этот ответ
YellowDuck


Профессионал
Сообщений: 1054
Откуда: Ярославль
Регистрация: 29-09-2009


29-01-2010 05:10
Спасибо еще раз, все сработало
 



Интернет-магазин товаров для детей yellowduck.ru
Хороший хостинг для Prestashop и не только one-hosting.ru
Вне форума
ПМ Отправить эл.сообщение 
Щелкните, и это сообщение будет добавлено в ваш ответ как цитата Цитировать этот ответ
careres


Новичок
Сообщений: 70
Регистрация: 21-12-2009


29-01-2010 19:28
Цитата:( YellowDuck @ 29-01-2010 06:10 Смотреть сообщение )
Спасибо еще раз, все сработало

Интересное меню. А можно поподробней про установку. Что куда в какую папку?
 
Вне форума
ПМ Отправить эл.сообщение 
Щелкните, и это сообщение будет добавлено в ваш ответ как цитата Цитировать этот ответ
YellowDuck


Профессионал
Сообщений: 1054
Откуда: Ярославль
Регистрация: 29-09-2009


29-01-2010 19:57
Надо скачать исходники по ссылке, css закинуть как есть в глобал.css темы (потом немного подправить в зависимости от того сколько кнопок будет и какие картинки, победить iE 6 пока не смог, там караул...)
jquery-1.3.2.js нукуда не закидывать! иначе не будет работать меню категорий аккордеон (в движке уже есть необходимая библиотека и она подключена)

header.tpl отредактировать, как показал Алекс
только вот эту строку долой
Код:
<div class="info">
            <a class="dry" href="">Icons\" target=\"_blank\">http://dryicons.com">Icons by DryIcons.com</a>
        </div>


Можна наверное простенький модуль написать, для удобного довавления меню, но у меня пока не хватает знаний
 



Интернет-магазин товаров для детей yellowduck.ru
Хороший хостинг для Prestashop и не только one-hosting.ru
Вне форума
ПМ Отправить эл.сообщение 
Щелкните, и это сообщение будет добавлено в ваш ответ как цитата Цитировать этот ответ
s600


Новичок
Сообщений: 7
Регистрация: 26-01-2010


30-01-2010 16:48
Цитата:( YellowDuck @ 29-01-2010 14:57 Смотреть сообщение )
Надо скачать исходники по ссылке, css закинуть как есть в глобал.css темы (потом немного подправить в зависимости от того сколько кнопок будет и какие картинки, победить iE 6 пока не смог, там караул...)

отличное меню, сам на досуге прикрутить по пробую :cof:
А по поводу ие6 только забить, на ие8-м все работает. Де факто стандартом является Опера и Рыжий Лис, если в них все ок - заморачиваться не стоит.
 
Вне форума
ПМ Отправить эл.сообщение 
Щелкните, и это сообщение будет добавлено в ваш ответ как цитата Цитировать этот ответ
YellowDuck


Профессионал
Сообщений: 1054
Откуда: Ярославль
Регистрация: 29-09-2009


31-01-2010 02:32
в ie6 работает, но косяки с png и влияет на расползание др. элементов шапки
 



Интернет-магазин товаров для детей yellowduck.ru
Хороший хостинг для Prestashop и не только one-hosting.ru
Вне форума
ПМ Отправить эл.сообщение 
Щелкните, и это сообщение будет добавлено в ваш ответ как цитата Цитировать этот ответ
Smelaja


Cпециалист
Сообщений: 176
Откуда: Киев
Регистрация: 12-10-2009


20-02-2010 17:20
очень красивая менюшка, только боязно ставить без вашей помощи

подскажите насколько понимаю количества кнопом можно уменьшить?
 
Вне форума
ПМ 
Щелкните, и это сообщение будет добавлено в ваш ответ как цитата Цитировать этот ответ
Smelaja


Cпециалист
Сообщений: 176
Откуда: Киев
Регистрация: 12-10-2009


20-02-2010 21:47
промудохалась пол дня чего-то они у меня прилипли к старнице при прокручивании, а у тебя не так

и опять забыла как сделать чтоб ссылки открывались в новом окне!!!

и с цветами ну ни как не могу придумать покрасивее

короче пока не подольна
 
Вне форума
ПМ 
Щелкните, и это сообщение будет добавлено в ваш ответ как цитата Цитировать этот ответ
Ответить Новая тема Новый опрос 
Всего: 4 1 2 3 4 >