[MODULE] Slideout image menu v2.0 - PS 1.2/1.6

[shacker 1,050]

Add a slide out menu with jquery animation to the left side of your web

http://catalogo-onli...prestashop.html

-added Facebook/Twitter lien

Dont forget to add your stores to
DIRECTORY-STORES.COM
A free directory of prestashop stores.

v1.5 - can be used in right / left position

v1.6 - Support multi shop and ability to disable startup animation

v1.7 - fix bug in the purchasing process in 1.5...

v1.8 - add google +1

v2.0- compatible ps 1.6+bootstrap

 

VISIT OUR SITE FOR LATEST VERSION OF THE MODULE AND MORE FREE MODULE
www.catalogo-onlinersi.com.ar
 

slideout.zip

Edited November 14, 2014 by shacker (see edit history)

[ysco 77]

Hello Lucas

I just checked the module, it is really great
Many thanks for the fast work on this module buddy, I really appreciate it.
Thanks like always.

Best regards,


Ysco..

[shacker 1,050]

Hello Lucas

I just checked the module, it is really great
Many thanks for the fast work on this module buddy, I really appreciate it.
Thanks like always.

Best regards,


Ysco..

Your welcome buddy.
This version dont use jquery 1.3 , so no problem with compatibility

[shacker 1,050]

Updated to fix IE incompatibility

[Crisp 0]

Thanx for this awesome module!

One question though:
- I checked my webshop @ 1024 x 768 and the slideout module overlays the category block on the left sidebar so ppl cant click the category but press one of the slides instead, so thats pretty annoying. I know most customers use higher resolutions these days but I would still like to solve it for lower resolutions aswell

Is there a way to fix this? One solution is to ask customers to buy a better monitor with a higher resolution

What numbers should i change in the css file to get a smaller sized slideout? I tried it but had some issues with it.

[shacker 1,050]

Thanx for this awesome module!

One question though:
- I checked my webshop @ 1024 x 768 and the slideout module overlays the category block on the left sidebar so ppl cant click the category but press one of the slides instead, so thats pretty annoying. I know most customers use higher resolutions these days but I would still like to solve it for lower resolutions aswell

Is there a way to fix this? One solution is to ask customers to buy a better monitor with a higher resolution

What numbers should i change in the css file to get a smaller sized slideout? I tried it but had some issues with it.

Tell me your site url and i check and apply a solution

[bksmartit 0]

This is a great module and I really like it!

I noticed one issue here!
I installed this module on my live site and I noticed that when I use this module from my front office and I click to login from this slideout then it will change page to login page but it doesn't display https://www. (as secure connection) but I see only http://www. (unsecure connection) but when I click login on the slideout again then change to https://www. however when I click RSS icon or Checkout icon or email icon from the slideout, it stays as secure connection - https://www. Plus when I click email or checkout I am getting error related to a javascript and the page freeze.

I use the latest version of Prestashop.

Please let me know if you noticed this happening and if there is fix for it?

Thank you

[shacker 1,050]

what is your site url
?

[bksmartit 0]

The site is a brand new one so there are no products yet and we require post our information instant of generic... product etc.
www.abilityinterface.com

[shacker 1,050]

Please redownload. i update and added back office configuration

[bksmartit 0]

I tried to re-download many times today but when I go to checkout section it says empty cart from your site? I cannot download it
Can you please check?

Thank you

[shacker 1,050]

clear your cache and try again please

[bksmartit 0]

I did cleared cache and I was able to download the new update!

I installed on my website and it seems working better but I still have some issues with freezing and getting errors under IE v.8
When I click in the slideout, the login or contact button I have the error and freeze in IE8:
the message: Message: Permission denied
Line: 94
Char: 3
Code: 0
URI: https://www.abilityinterface.com/modules/blockcart/ajax-cart.js

Under firefox is working better and I don't get any errors and it doesn't freeze.

However on both browsers I noticed when I click in the slideout to browse to login page it doesn't change to "https:www" secure connection it is still staying in unsecure connection?

[shacker 1,050]

Try to put {$base_dir_ssl} in the tpl in the links that you require ssl access

[bksmartit 0]

YOU ARE AMAZING!!!

It is working like a charm now!

I added {$base_dir_ssl} in the tpl file as you recommended in the link: login and contact.

Thank you a million and for your super quick respond with the solution

Best Regards,

[shacker 1,050]

your welcome buddy. You can comment our product in our page if you like it.
Best regards

[shacker 1,050]

update: PS 1.4 compatible, solved some errors

[ysco 77]

Thanks for this update buddy.
Whas waiting for this one

Best regards,

ysco..

[shacker 1,050]

thanks buddy. Tell me if you need other module update.

[ysco 77]

Will do that my friend

Thanks so far for all you have done.

Best regards,

ysco..

[ShowYou 17]

Hello,
I have PS 1.4.0.17 and i have error appear in Mozilla :
TypeError: Error #1010: Un terme n'est pas défini et n'a pas de propriété.
at Main/::loadFirstSlide()
at Main/::onFontInit()
at Main/::onIOError()
What is the problem ?

[shacker 1,050]

i really dont know. have you try to disable the module and get the error?

[ShowYou 17]

Shacker,
Thanks for your response. Your module work well. An other module (block cuber) make trouble in my website. Now, it's allright ! ;-)

[shacker 1,050]

ah ok. thanks for comment

[shacker 1,050]

Shacker,
Thanks for your response. Your module work well. An other module (block cuber) make trouble in my website. Now, it's allright ! ;-)

what is the problem with the module

[Pro 0]

in p s1.4 on i.e. i see icon in the footer but with firefox it's ok on left side :\

[shacker 1,050]

check if you have enalbed css compile and minify html, or uses smarty 2 instead of 3

[Pro 0]

i haven't this option enabled , i've tried to enable but nothig seem to change

[Pro 0]

in attach how i see it on explorer

[vestax 3]

Hello, I just upgrade to version 1.4.2 of the module is presatshop 'View Unit more on page aacueil

I just downloaded the version compatible with 1.4 but cele appears not

When the module is enabled, I no longer block the right on the homepage is the module is not present slidout

you have a solution please

[shacker 1,050]

in attach how i see it on explorer

You transplanted it to footer?

[vestax 3]

Hello, the module does not appear on my homepage of my store of what it to come please?

Prestashop 1.4.2

[shacker 1,050]

what is your site url

[gamersmarket 0]

when will be the module available, I think it's a great module, but it says out of stock. thanks

[shacker 1,050]

sorry. chack again

[gamersmarket 0]

can you tell me how can I add other buttons, like delivery etc.? thank you

[shacker 1,050]

you need to edit the tpl of the module and add the icons here, and add the css rules in the css file.

[gamersmarket 0]

Firstly I would like to thank you for your fast response. I am not a programmer, so the results of my coding was a server error, and error in the module. I have adjusted the slideout.tpl, the style.css and the slideout.php files. Can you take a look, and say what is wrong with them? Thank you in advance.

 

slideout.tpl:

  <ul id="navigation">
  {if $home eq "yes"}
       <li class="home"><a href="{$base_dir}index.php" title="{l s='Home' mod='slideout'}"></a></li>
  {else}{/if}
   {if $account eq "yes"}
       <li class="about"><a href="{$base_dir}my-account.php" title="{l s='My account' mod='slideout'}"></a></li>
       {else}{/if} 
        {if $cart eq "yes"}
       <li class="search"><a href="{$base_dir}order.php" title="{l s='Cart' mod='slideout'}"></a></li>
        {else}{/if}
        {if $rss eq "yes"}
       <li class="rssfeed"><a href="{$base_dir}modules/feeder/rss.php" title="{l s='RSS' mod='slideout'}"></a></li>
        {else}{/if}
        {if $contact eq "yes"}
	 <li class="contact"><a href="{$base_dir}contact-form.php" title="{l s='Contact' mod='slideout'}"></a></li>
   {else}{/if}
   <li class="delivery"><a href="{$base_dir}contact-form.php" title="{l s='Delivery' mod='slideout'}"></a></li>
   {else}{/if}
  </ul>


       <script type="text/javascript">
           $(function() {ldelim}
               $('#navigation a').stop().animate( {ldelim}'marginLeft':'{$left}px'{rdelim},3000);

               $('#navigation > li').hover(
                   function ()  {ldelim}
                       $('a',$(this)).stop().animate( {ldelim}'marginLeft':'-22px'{rdelim},200);
                   },
                   function ()  {ldelim}
                       $('a',$(this)).stop().animate( {ldelim}'marginLeft':'{$left}px'{rdelim},200);
                  {rdelim}
               );
           {rdelim});
       </script>

 

 

 

style.css:

 

ul#navigation {
   position: fixed;
   margin: 0px;
   padding: 0px;
   top: 10px;
   left: 0px;
   list-style: none;
   z-index:9999;
}
ul#navigation li {
   width: 100px;
}
ul#navigation li a {
   display: block;
   margin-left: -52px;
   width: 100px;
   height: 70px;    
   background-color:#CFCFCF;
   background-repeat:no-repeat;
   background-position:center center;
   border:1px solid #AFAFAF;
   -moz-border-radius:0px 10px 10px 0px;
   -webkit-border-bottom-right-radius: 10px;
   -webkit-border-top-right-radius: 10px;
   -khtml-border-bottom-right-radius: 10px;
   -khtml-border-top-right-radius: 10px;
   /*-moz-box-shadow: 0px 4px 3px #000;
   -webkit-box-shadow: 0px 4px 3px #000;
   */
   opacity: 1;
   filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
}
ul#navigation .home a{
   background-image: url(../images/home.png);
}
ul#navigation .about a      {
   background-image: url(../images/user.png);
}
ul#navigation .search a      {
   background-image: url(../images/cart.png);
}

ul#navigation .rssfeed a   {
   background-image: url(../images/rss.png);
}
ul#navigation .contact a    {
   background-image: url(../images/contact.png);
}

ul#navigation .delivery a    {
   background-image: url(../images/contact.png);
}

 

slideout.php:

 

<?php

class SlideOut extends Module
{
function __construct()
{
	$this->name = 'slideout';
	$this->tab = 'Blocks';
	$this->version = 1.1;

	parent::__construct();

	$this->displayName = $this->l('SlideOut');
	$this->description = $this->l('Adds a slide out menu  - www.catalogo-onlinersi.com.ar');
}

function install()
{
if (parent::install() == false OR $this->registerHook('header') == false OR !$this->registerHook('footer'))
 		return false;
			if (!Configuration::updateValue('SLIDEOUT_HOME', 'yes'))
		return false;
		if (!Configuration::updateValue('SLIDEOUT_ACCOUNT', 'yes'))
		return false;
		if (!Configuration::updateValue('SLIDEOUT_CART', 'yes'))
		return false;
		if (!Configuration::updateValue('SLIDEOUT_RSS', 'yes'))
		return false;
		if (!Configuration::updateValue('SLIDEOUT_CONTACT', 'yes'))
		return false;
		if (!Configuration::updateValue('SLIDEOUT_DELIVERY', 'yes'))
		return false;
		if (!Configuration::updateValue('SLIDEOUT_LEFT', '-90'))
		return false;
 	return true;
}
public function getContent()
{
	$output = '<h2>'.$this->displayName.'</h2>';
	if (Tools::isSubmit('submitSlideout'))
	{

		$home = Tools::getValue('home');
		$account = Tools::getValue('account');
		$cart = Tools::getValue('cart');
		$rss = Tools::getValue('rss');
		$contact = Tools::getValue('contact');
		$delivery = Tools::getValue('delivery');
			$left = Tools::getValue('left');

			Configuration::updateValue('SLIDEOUT_HOME', $home);
			Configuration::updateValue('SLIDEOUT_ACCOUNT', $account);
			Configuration::updateValue('SLIDEOUT_CART', $cart);
			Configuration::updateValue('SLIDEOUT_RSS', $rss);
			Configuration::updateValue('SLIDEOUT_CONTACT', $contact);
			Configuration::updateValue('SLIDEOUT_DELIVERY', $delivery);
			Configuration::updateValue('SLIDEOUT_LEFT', $left);


		if (isset($errors) AND sizeof($errors))
			$output .= $this->displayError(implode('<br />', $errors));
		else
			$output .= $this->displayConfirmation($this->l('Settings updated'));
	}
	return $output.$this->displayForm();
}
	public function displayForm()
{
	$output = '

	<form action="'.$_SERVER['REQUEST_URI'].'" method="post">
		<fieldset><legend><img src="'.$this->_path.'logo.gif" alt="" title="" />'.$this->l('Settings').'</legend>

<label>'.$this->l('Margin left').'</label>
			<div class="margin-form">
				<input type="text" size="5" name="left" value="'.Tools::getValue('left', Configuration::get('SLIDEOUT_LEFT')).'" />
				<p class="clear">'.$this->l('Margin to left (nevative value, default -90))').'</p>

			</div>
<label>'.$this->l('Home button?').'</label>
<div class="margin-form">
 <select name="home" >
 <option value="yes"'.((Configuration::get('SLIDEOUT_HOME') == "yes") ? 'selected="selected"' : '').'>Yes</option>
  <option value="no"'.((Configuration::get('SLIDEOUT_HOME') == "no") ? 'selected="selected"' : '').'>No</option>
   </select>


	</div>
		<label>'.$this->l('Account button?').'</label>
<div class="margin-form">
 <select name="account" >
 <option value="yes"'.((Configuration::get('SLIDEOUT_ACCOUNT') == "yes") ? 'selected="selected"' : '').'>Yes</option>
  <option value="no"'.((Configuration::get('SLIDEOUT_ACCOUNT') == "no") ? 'selected="selected"' : '').'>No</option>
   </select>


	</div>
		<label>'.$this->l('Cart button?').'</label>
<div class="margin-form">
 <select name="cart" >
 <option value="yes"'.((Configuration::get('SLIDEOUT_CART') == "yes") ? 'selected="selected"' : '').'>Yes</option>
  <option value="no"'.((Configuration::get('SLIDEOUT_CART') == "no") ? 'selected="selected"' : '').'>No</option>
   </select>


	</div>
		<label>'.$this->l('RSS button?').'</label>
<div class="margin-form">
 <select name="rss" >
 <option value="yes"'.((Configuration::get('SLIDEOUT_RSS') == "yes") ? 'selected="selected"' : '').'>Yes</option>
  <option value="no"'.((Configuration::get('SLIDEOUT_RSS') == "no") ? 'selected="selected"' : '').'>No</option>
   </select>


	</div>
		<label>'.$this->l('Contact button?').'</label>
<div class="margin-form">
 <select name="contact" >
 <option value="yes"'.((Configuration::get('SLIDEOUT_CONTACT') == "yes") ? 'selected="selected"' : '').'>Yes</option>
  <option value="no"'.((Configuration::get('SLIDEOUT_CONTACT') == "no") ? 'selected="selected"' : '').'>No</option>
   </select>
<p class="clear">'.$this->l('Autorotate images)  ').'</p>

	</div>

	<label>'.$this->l('Delivery button?').'</label>
<div class="margin-form">
 <select name="delivery" >
 <option value="yes"'.((Configuration::get('SLIDEOUT_DELIVERY') == "yes") ? 'selected="selected"' : '').'>Yes</option>
  <option value="no"'.((Configuration::get('SLIDEOUT_DELIVERY') == "no") ? 'selected="selected"' : '').'>No</option>
   </select>
<p class="clear">'.$this->l('Autorotate images)  ').'</p>

	</div>

			<center><input type="submit" name="submitSlideout" value="'.$this->l('Save').'" class="button" /></center>
		</fieldset>
	</form>';
	return $output;
}

/**
* Returns module content
*
* @param array $params Parameters
* @return string Content
*/
function hookFooter($params)
{
	global $smarty, $protocol_content, $server_host, $home, $account, $rss, $cart, $left, $contact, $delivery;


	$home = Configuration::get('SLIDEOUT_HOME');
	$account = Configuration::get('SLIDEOUT_ACCOUNT');
	$cart = Configuration::get('SLIDEOUT_CART');
	$rss = Configuration::get('SLIDEOUT_RSS');
	$contact = Configuration::get('SLIDEOUT_CONTACT');
	$delivery = Configuration::get('SLIDEOUT_DELIVERY');
	$left = Configuration::get('SLIDEOUT_LEFT');

	$smarty->assign(array(
		'home' => $home,
		'account' => $account,
		'rss' => $rss,

		'cart' => $cart,
		'left' => $left,
		'contact' => $contact
			'delivery' => $delivery

	));

	return $this->display(__FILE__, 'slideout.tpl');
}
function hookHeader($params)
{	




	return $this->display(__FILE__, 'slideout-header.tpl');
}


}

?>

 

style.css

[shacker 1,050]

style is ok, change this in tpl

 

<li class="delivery"><a href="{$base_dir}contact-form.php" title="{l s='Delivery' mod='slideout'}"></a></li>

{else}{/if}to

<li class="delivery"><a href="{$base_dir}contact-form.php" title="{l s='Delivery' mod='slideout'}"></a></li>

[shacker 1,050]

added twitter and facebook links to the menu

[gamersmarket 0]

Thank you! I really appreciate your help and time! You rule

[shacker 1,050]

your welcome buddy. regards

[Profeta 0]

seems it doesnt work with 1.4.4.1, isn't it?

[shacker 1,050]

works, you need to unzip, and upload the folder inside to modules in your ftp

[Jevgen 12]

where i can find blue incons like in 1st post ? and how can I chage hover zone?

[shacker 1,050]

you can found it on iconfinder.net

[Jevgen 12]

how can I change hover zone ?

[Jevgen 12]

try to use it with screen resolution 1024x768 and you understand what I am talking about

[shacker 1,050]

i have this resolution. You mean that overflow the page?

you have to edit the javascript to hide more or less the menu

[Jevgen 12]

what file should i edit to change hover or smth else ? because it overflows categories' menu when i use nootebook with res. 1024x768

[shacker 1,050]

slideout.tpl

 

y el margin left inicial lo puedes modificar, el otro lo cambias desde la configuracion del moudulo

 

 

<script type="text/javascript">

$(function() {ldelim}

$('#navigation a').stop().animate( {ldelim}'marginLeft':'{$left}px'{rdelim},3000);

 

$('#navigation > li').hover(

function () {ldelim}

$('a',$(this)).stop().animate( {ldelim}'marginLeft':'-22px'{rdelim},200);

},

function () {ldelim}

$('a',$(this)).stop().animate( {ldelim}'marginLeft':'{$left}px'{rdelim},200);

{rdelim}

);

{rdelim});

</script>

[jotaluz 0]

I like change the link in facebook button, to opeen directly my facebook page.

 

Whom i can make this?

 

Thks

[shacker 1,050]

edit directly in the tpl file of the module and put your url of fan page

[shopav 0]

don't work with prestashop 1.4???

[shacker 1,050]

works on presta 1.4

[shacker 1,050]

v1.4 - updated to ps 1.5 & addcss

[Ricsca 7]

Thanks

[shacker 1,050]

thanks for comment

!

[lubo_ke 0]

Hello,

at first, thanks a lot for good work...

 

i have a little problem, on every page on my site is module working, but on home (index) it dont work, it have problem with nivo slider, but dont know what is the problem ... do you know something about this bug ? or its only bug on my page ... i cant post u an url cause i have it on local .... thanks for your reply

[shacker 1,050]

send me your site URL and i see what happend

[tdr170 679]

Giving this module a try workes fine with 1.4.6.2, However for myself I am modifying almost everything.

Changed all of the links to outside websites and created my own images for the sliders.

I also moved the slider out so it is positioned just on the left edge in full view.

So far it works fine my only concern is what will happen on a smaller monitor I have a widescreen samsung running at 1680x1050.

I have a feeling on a small monitor that the slider will overlap my left column.

[shacker 1,050]

only cna overlap if your monitor have 800x600 px, but (and prestashop default theme is 980px). in a 1200 px, must be ok

[tdr170 679]

Where I had it positioned it was on top of the left menu.

I had altered so it was not hidden, I had it on left side in full view as I felt that it was sort of hidden and wanted to make sure it was seen.

I looked on another monitor and it was indeed over the left menu, so what I did was to go back to original setup with it hidden on left and changed the borders.

Now I have border top, bottom, left and right with the right border in blue and 3px wide, stangs out this way.

[lubo_ke 0]

hello site url is: dkpk.atknet.sk ... please have a look

[shacker 1,050]

the problem comes with the menu jbx_menu(java error on superfish), julian breux. Check is disabling this module solve the problem

[lubo_ke 0]

no the problem in not solved, i think that problem comes with nivo slider, becasuse your modul works great on every other page, but not on homepage ... jbx_menu is now disabled, can u look on page ...

[shacker 1,050]

HI. I see the error on

 

http://dkpk.atknet.sk/js/jquery/jquery.easing.1.3.js

 

if you disable nivo slider the slide works?

 

try puttin in the header the slide menu up to the nivo slider in modules/positions

[lubo_ke 0]

if i disable nivo slider, slide works ...

 

i put slideout upper, but slide dont work ... i think i cannot have both modules on page :-(

[shacker 1,050]

i check in local both modules and advise (with default theme is the same?)

[lubo_ke 0]

yes its default theme what i have

[hrtr 0]

Hello!

 

Puedo añadir un nuevo icono con una nueva dirección?

[shacker 1,050]

si, debes editar el css y el tpl del modulo

[hrtr 0]

El código original:

{if $rss eq "yes"}
    <li class="rssfeed"><a href="{$modules_dir}feeder/rss.php" title="{l s='RSS' mod='slideout'}"></a></li>
	 {else}{/if}

 

Editado código, por ejemplo:

{if $rss eq "yes"}
    <li class="rssfeed"><a href="[b]http://www.google.com[/b]" title="{l s='RSS' mod='slideout'}"></a></li>
	 {else}{/if}

Se debe redirigir al sitio de Google, ¿verdad? Yo lo hago y sólo mantiene la misma URL original. He editado slideout.tpl.

[shacker 1,050]

ve a preferencias, rendimiento y activa forzar compilacion

[hrtr 0]

[color=#666600]{[/color][color=#000088]if[/color] $rss eq [color=#008800]"yes"[/color][color=#666600]}[/color]
           [color=#666600]<[/color]li [color=#000088]class[/color][color=#666600]=[/color][color=#008800]"rssfeed"[/color][color=#666600]><[/color]a href[color=#666600]=[/color][color=#008800]"http://www.google.com"[/color] title[color=#666600]=[/color][color=#008800]"{l s='RSS' mod='slideout'}"[/color][color=#666600]></[/color]a[color=#666600]></[/color]li[color=#666600]>[/color]
                [color=#666600]{[/color][color=#000088]else[/color][color=#666600]}{/[/color][color=#000088]if[/color][color=#666600]}[/color]

Pongo el enlace en negrita, más lo que el código no funciona, siga el cambio correcto.

[shacker 1,050]

tienes la url de lsitio?

[hrtr 0]

Shacker Perfecto, muchas gracias

[shacker 1,050]

ah ok, ya funciona entonces

[pestrong 0]

Is there solution for low resolution 1024*768?

customer can not click left column over 1024*768.

I can not tell to all my customer...change resolution 1024*768 to 1124*768.

[shacker 1,050]

sell a better monitor to these customers jeje.

 

You can adjust the slide to hide more on the screen. use more negative value on the css for the menu

[duongphuc 16]

Great module - thanks alot

[Rui1 1]

hello

Thank you

[Wippi 1]

shacker im trying to contact with you, please read private message , thank you!

[shacker 1,050]

send me again please

[shacker 1,050]

hello

Thank you

your welcome!

[Rui1 1]

hello, can upgrade to run on Internet Explorer 9? is that I had to uninstall the module, if it did not show my website properly.

Greetings

[shacker 1,050]

works on ie9. You cna check this demo

 

http://prestashoptemplates.com.ar/?t=Grays

[dsczone 0]

hy... i try to modify this line...

{if $facebook eq "yes"}

<li class="facebook"><a href="http://www.facebook.com/share.php?u=http://{$servername}{$requesturi}" title="{l s='Facebook' mod='slideout'}"></a></li>

{else}{/if}

 

to modify in and don`t work !!!!!

 

{if $facebook eq "yes"}

<li class="facebook"><a href="http://www.facebook.com/DSCZone" title="{l s='Facebook' mod='slideout'}"></a></li>

{else}{/if}

 

 

 

PLEASE HELP THANKS..

[satrops 2]

Nice, thx you

[shacker 1,050]

hy... i try to modify this line...

{if $facebook eq "yes"}

<li class="facebook"><a href="http://www.facebook.com/share.php?u=http://{$servername}{$requesturi}" title="{l s='Facebook' mod='slideout'}"></a></li>

{else}{/if}

 

to modify in and don`t work !!!!!

 

{if $facebook eq "yes"}

<li class="facebook"><a href="http://www.facebook.com/DSCZone" title="{l s='Facebook' mod='slideout'}"></a></li>

{else}{/if}

 

 

 

PLEASE HELP THANKS..

go to preferences, performance, and enable force compile to see the changes

[shacker 1,050]

Nice, thx you

your welcome

[Purpleman 0]

Hello, can you tell me how to remove the points in slideout.tpl?

I would align horizontally rather vecticalment!?

 

The original code is :

 

 

 

<ul id="navigation">

 

 

 

{if $account eq "yes"}

<li class="about"><a href="{$base_dir_ssl}my-account.php" title="{l s='My account' mod='slideout'}"></a></li>

{else}{/if}

{if $cart eq "yes"}

<li class="search"><a href="{$base_dir}order.php" title="{l s='Cart' mod='slideout'}"></a></li>

{else}{/if}

 

{if $contact eq "yes"}

<li class="contact"><a href="{$base_dir_ssl}contact-form.php" title="{l s='Contact' mod='slideout'}"></a></li>

{else}{/if}

{if $facebook eq "yes"}

<li class="facebook"><a href="http://www.facebook.com/share.php?u=http://{$servername}{$requesturi}" title="{l s='Facebook' mod='slideout'}">

 

</a></li>

{else}{/if}

</ul>

 

 

 

 

</script>

 

 

thank you

[shacker 1,050]

site url?

 

the points can be removed with

 

 

 

ul#navigation li {

• width: 100px;
  
• list-style: none;
  

}

[Purpleman 0]

the site is at the beginning of the construction

http://pimpmyshirt.fr/Test/

 

 

ul#navigation li {

• width: 100px;
  
• list-style: none;
  

}

I use it in style-slideout.css and it does not work. I'll try again tonight and hold you to Current.

 

Thanks for your help

 

 

Slideout.css

 

 

ul#navigation {

position: fixed;

margin: 0px;

padding: 0px;

top: 374px;

right: -65px;

list-style: none;

z-index:9999;

}

ul#navigation li {

width: 100px;

list-style: none;

 

}

 

ul#navigation li a {

display: block;

margin-left: -52px;

width: 100px;

height: 70px;

list-style: none;

 

background-color:#CFCFCF;

background-repeat:no-repeat;

background-position:center center;

border:1px solid #AFAFAF;

-moz-border-radius:0px 10px 10px 0px;

-webkit-border-bottom-right-radius: 10px;

-webkit-border-top-right-radius: 10px;

-khtml-border-bottom-right-radius: 10px;

-khtml-border-top-right-radius: 10px;

/*-moz-box-shadow: 0px 4px 3px #000;

-webkit-box-shadow: 0px 4px 3px #000;

*/

opacity: 1;

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);

}

ul#navigation .home a{

background-image: url(../images/home.png);

}

ul#navigation .about a {

background-image: url(../images/user.png);

}

ul#navigation .search a {

background-image: url(../images/cart.png);

}

 

ul#navigation .rssfeed a {

background-image: url(../images/rss.png);

}

ul#navigation .contact a {

background-image: url(../images/contact.png);

}

ul#navigation .facebook a {

background-image: url(../images/facebook.png);

}

 

ul#navigation .twitter a {

background-image: url(../images/twitter.png);

}

[Purpleman 0]

I want this final result at the top left without the roll over. My only problem is that I do not understand the <li she forms the vertical menu. can you help me put horizontal please? I try all night and nothing works .... please help me

 

 

[shacker 1,050]

you can use this demo to adapt that you need, only change the css and js

 

http://tympanus.net/codrops/2009/12/08/beautiful-slide-out-navigation-revised/

[shacker 1,050]

v1.5 - can be used in right / left position

[jmaybes 0]

hi shacker. first off BIG thanks for this module and all you do. I seem to have a problem only in internet explorer. the menu gets pushed to the footer and displayed wrong, but only on product category pages like this:

 

http://74.117.145.98/~tooters/category.php?id_category=24

 

any adivce?