Категории

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

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

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 для корзины как на скрине выше?

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

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

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

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

2. Открываем style.css
для левой стороны

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

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

Источник