Interactive site – how to revive our site

Jak wyróżnić się z tłumuI think everyone from time to time feel the need to make changes in our environment, there is include web pages. It is advisable to make changes (sometimes even small) so our users do not get bored . One proposal is a small gadget that appears on the website. This may be an additional fixed menus that appear when I lose sight of the main menu. On the www.asl.com.pl you can see the effect this gadget.

1. What is to be found in our fixed box?

You can put there additional menu or link to a related article ?

Our box:

<div class="menu_bottom">
</div>

and CSS of box

.menu_bottom {
bottom:1px;
color:#000000;
height:125px;
position:fixed;
right:30px;
}

2. The script responsible for special effects.

I chose the effect of disappearing but jQuery provides a variety of other interesting effects.

$j=jQuery.noConflict();

$j('div.menu_bottom').fadeOut(1, function() {
 // Animation complete
});

function scroll_check() {

 var top=$j(window).scrollTop();
 if( top < 130 ){

 if( !$j('div.menu_bottom').is(':visible') ){
 } else {
 $j('div.menu_bottom').fadeOut();
 }

 } else {
 if( $j('div.menu_bottom').is(':visible') ){
 } else {

 $j('div.menu_bottom').fadeIn();
 }
 }

}

window.onscroll = scroll_check;

Do you have any interesting ideas that you can put in that box? Feel free to comment.

Edit 20.12.2010:

JQuery library used in the example can be download from http://jquery.com/.

<div class=”menu_bottom” style=”display: block;”>
<img height=”125px” usemap=”#mapa” alt=”ASL Mini menu” src=”http://www.asl.com.pl/wp-content/themes/asl_pl/images/mini_menu.png”>
<map id=”mapa” name=”mapa”>
<area alt=”" href=”http://www.asl.com.pl/” title=”Strona główna ASL” coords=”1, 1, 31, 28″ shape=”rect”>
<area alt=”" href=”http://www.asl.com.pl/fracht-lotniczy/” title=”Transport lotniczy” coords=”31, 1, 62, 28″ shape=”rect”>
<area alt=”" href=”http://www.asl.com.pl/fracht-kolejowy/” title=”Transport kolejowy” coords=”63, 1, 93, 28″ shape=”rect”>

<area alt=”" href=”http://www.asl.com.pl/fracht-morski/” title=”Transport morski” coords=”1, 29, 31, 56″ shape=”rect”>
<area alt=”" href=”http://www.asl.com.pl/fracht-drogowy/” title=”Transport drogowy” coords=”31, 29, 62, 56″ shape=”rect”>
<area alt=”" href=”http://www.asl.com.pl/logistyka/” title=”Logistyka” coords=”63, 29, 93, 56″ shape=”rect”>

<area alt=”" href=”http://www.asl.com.pl/agencja-celna-2/” title=”Agencja celna” coords=”1, 57, 31, 84″ shape=”rect”>
<area alt=”" href=”http://www.asl.com.pl/strefa-klienta/” title=”Strefa Klienta” coords=”31, 57, 62, 84″ shape=”rect”>
<area alt=”" href=”http://www.asl.com.pl/agencja-celna/” title=”Informacje o ASL” coords=”63, 57, 93, 84″ shape=”rect”>

<area alt=”" href=”http://www.asl.com.pl/kontakt/” title=”Kontakt ASL” coords=”31, 85, 62, 113″ shape=”rect”>
<area alt=”" href=”http://www.asl.com.pl/pomoc/” title=”Pomoc” coords=”63, 85, 93, 113″ shape=”rect”>
</map>
</div>

Share and Enjoy:
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • Blogplay
  • MySpace
  • PDF

Related Posts

  1. No comments yet.

  1. No trackbacks yet.

*

Founder:

Fachowa budowa domu Lublinedytor edytorToner do drukarki HP HP 27X czarny / black, HP C4127X, C4127X Jesli interesują Ciebie tonery do drukarek HP koniecznie zajrzyj na naszą stronę!