The jQuery implementation can be used for dynamic sliding menus for blogs

  • 2020-05-12 02:09:10
  • OfStack

This article demonstrates an example of how jQuery can implement dynamic sliding menus for blogs. Share with you for your reference. The details are as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="" lang="en" xml:lang="en">
<title>jQuery Sliding menu plug-in </title>
<script type="text/javascript" src="js/jquery1.3.2.js"></script>
<script type="text/javascript">
     tagdrop: function(options) {
  var defaults = {
      tagPaddingTop: '90px',
      tagDefaultPaddingTop: '30px',
      bgColor: '#B1CCED',
      bgMoverColor: '#7FB0F0',
      textColor: '#e0e0e0',
      textDefaultColor: '#fff'
  var options = $.extend(defaults, options);
  return this.each(function() {
      var obj = $(this);
      var li_items = $("li", obj);
      $("li", obj).css('background-color', options.bgColor);
   $(this).animate({paddingTop: options.tagPaddingTop}, 300);
   $(this).css('background-color', options.bgMoverColor);
   $(this).css('color', options.textColor);
      }).mouseout(function() {
   $(this).animate({paddingTop: options.tagDefaultPaddingTop}, 500);
   $("li",$(this).parent()).css('background-color', options.bgColor);
   $("li",$(this).parent()).css('color', options.textDefaultColor);
<script type="text/javascript">
    $(document).ready(function() {
 $('.menu').tagdrop({tagPaddingTop: '60px',bgColor: '#B1CCED',bgMoverColor: '#7FB0F0',textColor: '#e0e0e0'});
    body {
    #nav li {margin: 0; padding: 0;display: inline;list-style-type: none;font-size: 12px;}
    #nav a:link, #nav a:visited {
    #nav a:hover {color: #fff;  background:#FF6A00;}
    #nav, #nav {background-color: #fff;color: #FF6A00;}
    .menu {
 margin: 0;
    .menu li {
 margin:0 auto;
 padding:30px 5px 5px 5px;
 margin:0px 3px 0px 3px;
 -moz-border-radius: 0px 0px 10px 10px;
 -webkit-border-radius:0px 0px 10px 10px;
 -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
 -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
 color: #FFF;
 text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
 font-family: "Lucida Grande",Lucida,Verdana,sans-serif;
        <ul class="menu">
            <li>About us</li>

I hope this article has been helpful to your jQuery programming.

Related articles: