Категории

[FAQ] Часто задаваемые вопросы и ответы

Проблемы и решения

Ошибки и исправления

Общие вопросы

Расширения

Установка и обновление

Модули

Шаблоны

Локализация интерфейса

Коммерческие предложения

Учимся бизнесу

Бизнес книги

Поисковая оптимизация (SEO)

Магазины на ShopOS

Хостинг для ShopOS

Предложения и пожелания

Курилка

Делаем красивый раздвижной поиск ShopOs

Делаем красивый раздвижной поиск ShopOs, подходит фиксированим шаблонам.
Начнем установку!
1. 
Открываем  themes/ваш шаблон/javascript/general.js.php  и пишем путь к скрипту

<script src="<?php echo _HTTP_THEMES_C; ?>javascript/slide_search.js" type="text/javascript"></script>

2.  Открываем style.css
для левой стороны
/*----------------------------- left раздвижной поиск -----------------------------*/
.panel {
position: fixed;
top: 50px;
left: 0;
display: none;
background: #000000;
border:1px solid #111111;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
width: 330px;
height: auto;
padding: 30px 30px 30px 130px;
filter: alpha(opacity=85);
opacity: .85;
}

.panel p{
margin: 0 0 15px 0;
padding: 0;
color: #cccccc;
}

.panel a, .panel a:visited{
margin: 0;
padding: 0;
color: #9FC54E;
text-decoration: none;
border-bottom: 1px solid #9FC54E;
}

.panel a:hover, .panel a:visited:hover{
margin: 0;
padding: 0;
color: #ffffff;
text-decoration: none;
border-bottom: 1px solid #ffffff;
}

a.trigger{
position: fixed;
text-decoration: none;
top: 80px; left: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 40px 20px 15px;
font-weight: 700;
background:#333333 url(img/plus.png) 85% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
}

a.trigger:hover{
position: fixed;
text-decoration: none;
top: 80px; left: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 40px 20px 20px;
font-weight: 700;
background:#222222 url(img/plus.png) 85% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
}

a.active.trigger {
background:#222222 url(img/minus.png) 85% 55% no-repeat;
}
/*----------------------------- left раздвижной поиск -----------------------------*/

А для правой стороны

/*----------------------------- right раздвижной поиск -----------------------------*/
.panel {
position: fixed;
top: 50px;
right: 0;
display: none;
background: #000000;
border:1px solid #111111;
-moz-border-radius-topleft: 20px;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
width: 330px;
height: auto;
padding: 30px 30px 30px 130px;
filter: alpha(opacity=85);
opacity: .85;
}

.panel p{
margin: 0 0 15px 0;
padding: 0;
color: #cccccc;
}

.panel a, .panel a:visited{
margin: 0;
padding: 0;
color: #9FC54E;
text-decoration: none;
border-bottom: 1px solid #9FC54E;
}

.panel a:hover, .panel a:visited:hover{
margin: 0;
padding: 0;
color: #ffffff;
text-decoration: none;
border-bottom: 1px solid #ffffff;
}

a.trigger{
position: fixed;
text-decoration: none;
top: 80px; right: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 40px 20px 15px;
font-weight: 700;
background:#333333 url(img/plus.png) 85% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topleft: 20px;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
}

a.trigger:hover{
position: fixed;
text-decoration: none;
top: 80px; right: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 40px 20px 20px;
font-weight: 700;
background:#222222 url(img/plus.png) 85% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topleft: 20px;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
}

a.active.trigger {
background:#222222 url(img/minus.png) 85% 55% no-repeat;
}
/*----------------------------- right раздвижной поиск -----------------------------*/

3.  Index.html добавляем
    <!-- раздвижной поиск -->
<div class="panel">
    <h3>Поиск</h3>
    {$box_SEARCH}
</div>
<a class="trigger" href="#">Поиск</a>
<!-- раздвижной поиск -->

4.  картинки минус и плюс грузим в папку img, а slide_search.js в папку javascript
ВОТ и Все!
Скринах видно что у нас получилось!


Спасибо!


Не за что! ;)
По такому принципу можно и Корзину вывести!


Спасибо большое!

Только что то не хочет фурычить у меня  :-\ . Поиск закладка с плюсом появилась, но когда на нее кликаю ничего не выдвигается, тупо перехожу по ссылке http://сайт.ru/#

В чем может быть загвоздка? где рыть?


Можно ссылку?
А то я вроде все написал нормально, может что то не правильно сделали?


раз все нормално показывает то у вас со скриптом проблема!
Или вы не правильно подключили или с чем то комфликт!
И еще что за шаблон? если можно! )))


M-martin спасибо!

Все нормально, просто там где тестил был выключен Jquery на страницах. Все отлично работает!

Еще раз спасибо!


M-martin, а не могли бы Вы поделится BOX_CART (если изменяли в Cleanshop) и css для корзины как на скрине выше?



M-martin, а не могли бы Вы поделится BOX_CART (если изменяли в Cleanshop) и css для корзины как на скрине выше?

Да вроде нечего не изминил! как на поиск так и на корзину сделал! А вчем проблема?


Да у меня шаблон buy-shopos-2, и тупо весь бокс корзины вылазит, закинул BOX_CART от Cleanshop, но видимо в стилях нужно ковыряться еще...

Разбираюсь потихоньку, уже что то похожее нарисовалось ) спасибо!



Да у меня шаблон buy-shopos-2, и тупо весь бокс корзины вылазит, закинул BOX_CART от Cleanshop, но видимо в стилях нужно ковыряться еще...

Разбираюсь потихоньку, уже что то похожее нарисовалось ) спасибо!

http://www.shopos.ru/forum/index.php?topic=5633.new#new



Делаем красивый раздвижной поиск ShopOs, подходит фиксированим шаблонам.
Начнем установку!
1. 
Открываем  themes/ваш шаблон/javascript/general.js.php  и пишем путь к скрипту

<script src="<?php echo _HTTP_THEMES_C; ?>javascript/slide_search.js" type="text/javascript"></script>

2.  Открываем style.css
для левой стороны
/*----------------------------- left раздвижной поиск -----------------------------*/
.panel {
position: fixed;
top: 50px;
left: 0;
display: none;
background: #000000;
border:1px solid #111111;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
width: 330px;
height: auto;
padding: 30px 30px 30px 130px;
filter: alpha(opacity=85);
opacity: .85;
}

.panel p{
margin: 0 0 15px 0;
padding: 0;
color: #cccccc;
}

.panel a, .panel a:visited{
margin: 0;
padding: 0;
color: #9FC54E;
text-decoration: none;
border-bottom: 1px solid #9FC54E;
}

.panel a:hover, .panel a:visited:hover{
margin: 0;
padding: 0;
color: #ffffff;
text-decoration: none;
border-bottom: 1px solid #ffffff;
}

a.trigger{
position: fixed;
text-decoration: none;
top: 80px; left: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 40px 20px 15px;
font-weight: 700;
background:#333333 url(img/plus.png) 85% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
}

a.trigger:hover{
position: fixed;
text-decoration: none;
top: 80px; left: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 40px 20px 20px;
font-weight: 700;
background:#222222 url(img/plus.png) 85% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
}

a.active.trigger {
background:#222222 url(img/minus.png) 85% 55% no-repeat;
}
/*----------------------------- left раздвижной поиск -----------------------------*/

А для правой стороны

/*----------------------------- right раздвижной поиск -----------------------------*/
.panel {
position: fixed;
top: 50px;
right: 0;
display: none;
background: #000000;
border:1px solid #111111;
-moz-border-radius-topleft: 20px;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
width: 330px;
height: auto;
padding: 30px 30px 30px 130px;
filter: alpha(opacity=85);
opacity: .85;
}

.panel p{
margin: 0 0 15px 0;
padding: 0;
color: #cccccc;
}

.panel a, .panel a:visited{
margin: 0;
padding: 0;
color: #9FC54E;
text-decoration: none;
border-bottom: 1px solid #9FC54E;
}

.panel a:hover, .panel a:visited:hover{
margin: 0;
padding: 0;
color: #ffffff;
text-decoration: none;
border-bottom: 1px solid #ffffff;
}

a.trigger{
position: fixed;
text-decoration: none;
top: 80px; right: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 40px 20px 15px;
font-weight: 700;
background:#333333 url(img/plus.png) 85% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topleft: 20px;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
}

a.trigger:hover{
position: fixed;
text-decoration: none;
top: 80px; right: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 40px 20px 20px;
font-weight: 700;
background:#222222 url(img/plus.png) 85% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topleft: 20px;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
}

a.active.trigger {
background:#222222 url(img/minus.png) 85% 55% no-repeat;
}
/*----------------------------- right раздвижной поиск -----------------------------*/

3.  Index.html добавляем
    <!-- раздвижной поиск -->
<div class="panel">
    <h3>Поиск</h3>
    {$box_SEARCH}
</div>
<a class="trigger" href="#">Поиск</a>
<!-- раздвижной поиск -->

4.  картинки минус и плюс грузим в папку img, а slide_search.js в папку javascript
ВОТ и Все!
Скринах видно что у нас получилось!

не понятно в какие файлы нада кидлать а вот после чево и каво ?


как сделать чтоб в выдвижном меню открывался сразу расширенный поиск? т.е. файл  advanced_search.php


Источник



Copyright ShopOS