Tutorial: a.select event comment
23.12.14
 To those who're new to web design, this tutorial is on How to make an effect stay at a clicked link . I couldn't possibly make the latter this post's title as it would have made my blog's front-page a lil' messy and uninviting? Anyway, on designing my current layout, there were two important things I learned- the first is yet another wonderful thing I learned in coding that I could add to my brain archives, labelled under 'web design' , and the second is an unforgiving incident that had happened in mere seconds.

I will compose a separate entry on the latter.

 Making an effect stay at a clicked link or better known as the a.select event is what I've been dying(or so) to know how to code. I had forgotten about this zeal of mine over the months and it was once again provoked when I visited this blog and ventured a little further so as to click the navis.
It is noticeable that when there's a click on any of the navigation links, it not only changes in color, but stays with its new text-effect until another link of the same div is clicked.


when clicked on 'author'..


...that was exactly what I wanted to know.

I tried inspecting element but to no avail. I then googled for help on the matter at hand..but my search efforts proved futile. After a while spent on googling for help, just when I nearly gave up, I recalled how useful and brilliant a site jQuery UI was. I immediately looked up that site and the help..the desperate help I needed..it was there

 Implementing those helpful codes in my site, I was able to come up with the current navigation menu on my blog. It was simple yet sophisticated(not all that sophisticated once you know the code that runs the magic).


when clicked on 'extras'..


notice the shadowy outset border?

I'll not be tutoring on how to code my not-so-nice navis. Trust me they're a whole bunch of messy codes. I've coded a simple navigation menu for this tutorial on CSSDeck. Check out the demo here.

The HTML Markup
<center><div id="navis"><a class="navis ui-selected" href="#">Link 1</a><a class="navis" href="#">Link 2</a><a class="navis" href="#">Link 3</a><a class="navis" href="#">Link 4</a><a class="navis" href="#">Link 5</a><a class="navis" href="#">Link 7</a><a class="navis" href="#">Link 8</a></div></center>
  <br><br>
  <center><div id="navis2"><a class="navis ui-selected" href="#"><i style="font-size:20px;" class="fa fa-anchor"></i></a><a class="navis" href="#"><i style="font-size:20px;"class="fa fa-asterisk"></i></a><a class="navis" href="#"><i style="font-size:20px;"class="fa fa-car"></i></a><a class="navis" href="#"><i style="font-size:20px;"class="fa fa-caret-square-o-right"></i></a><a class="navis" href="#"><i style="font-size:20px;"class="fa fa-envelope-o"></i></a><a class="navis" href="#"><i style="font-size:20px;"class="fa fa-paw"></i></a><a class="navis" href="#"><i style="font-size:20px;"class="fa fa-slack"></i></a></div></center>

The CSS
  #navis a{
    background-color:white;
    position:relative;
    width:50px;height:15px;
    font-family:tahoma;
    font-size:15px;
    color:black;
    letter-spacing:2px;
    text-decoration:none;
    text-align:center;
    display:inline-block;
    border:1px solid grey;
    margin-right:5px;
    padding:5px;
    padding-bottom:10px;
 
  }
   #navis .ui-selected , #navis a:hover {
    background-color:#ccc;
    color:white;
    }
  #navis .ui-selected{
    box-shadow: inset 0px 0px 10px 2px rgba(119, 119, 119, 0.8);
-moz-box-shadow: inset 0px 0px 10px 2px rgba(119, 119, 119, 0.8);
-webkit-box-shadow: inset 0px 0px 10px 2px rgba(119, 119, 119, 0.8);
      transition: all 0.1s ease;
  }

  #navis  , #navis2{
    background-image:url(http://i.imgur.com/Fz6d0hU.png);
    width:500px;
    height:auto;
    border:5px double #808080;
    position:relative;
       z-index:999999999;
    top:100px;left:20%;
    -webkit-transform: translate3d(-50%,-50%,0);
      transform: translate3d(-50%,-50%,0);     padding:5px;
  }
  #navis2 a{
    background-color:white;
    position:relative;
    width:35px;height:25px;
    font-family:tahoma;
    font-size:15px;
    color:black;
    letter-spacing:2px;
    text-decoration:none;
    text-align:center;
    display:inline-block;
    border:1px solid grey;
    margin-right:5px;
    padding:5px;
    border-radius:100px;
  }
   #navis2 .ui-selected , #navis2 a:hover {
    background-color:#ccc;
    color:white;
    }
  #navis2 .ui-selected{
    box-shadow: inset 0px 0px 10px 2px rgba(119, 119, 119, 0.8);
-moz-box-shadow: inset 0px 0px 10px 2px rgba(119, 119, 119, 0.8);
-webkit-box-shadow: inset 0px 0px 10px 2px rgba(119, 119, 119, 0.8);
      transition: all 0.1s ease;
  }
  #navis2 i {
    padding-bottom:2px;
  }


 The Important Codes

paste the following 'bootstraps'(not quite actually) after the tag <head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>  

paste the following script between the tags </style> and </head>
<script>
  $(function() {
    $( "#navis" ).selectable();
  });
  </script>
The ID of your navigation buttons..

To make a navigation button readily be in its 'clicked effect' on load,..
i.e:
<a class="navis ui-selected" href="#">Link 1</a>

the 'ui-selected' has to follow after your navigation button's ID..

..and that's about it. You might want to head on to here to play around with the codes and better understand how the a.select event works.

Last but not least, Feliz Navidad to all who celebrate! :D


Labels: , , ,