Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #22026

    rider55
    Participant

    How to add drop down menu in StyleMix Blogger Template

    #22028

    LindyLou
    Participant

    Go into the HTML of your Template and change Linklist1 from true to false.
    Where it says crosscol, add a javascript gadget and copy and paste this code into the box.

    Now, drag the new javascript below the Edit this menu.
    Save….Now remove the menu above it. Make sure you change these example links to yours.

    <center><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js">
    </script>
    
    <script type="text/javascript">
      $(function() {
    
        //We initially hide the all dropdown menus
        $('#dropdown_nav li').find('.sub_nav').hide();
    
        //When hovering over the main nav link we find the dropdown menu to the corresponding link.
        $('#dropdown_nav li').hover(function() {
          //Find a child of 'this' with a class of .sub_nav and make the beauty fadeIn.
          $(this).find('.sub_nav').fadeIn(100);
        }
                                    , function() {
                                      //Do the same again, only fadeOut this time.
                                      $(this).find('.sub_nav').fadeOut(50);
                                    }
                                   );
      }
       );
    </script>
    <style>
      #dropdown_nav a {
     font-family:Arial, Sans-Serif;
            font-size:15px;
            font-weight:bold;
            color:#525252;
            text-decoration:none;
          }
          #dropdown_nav {
            width:960px;
            padding:0px;
            display:inline-block;
            list-style:none;
            -moz-box-shadow:inset 0px 0px 1px #fff;
            -webkit-box-shadow:inset 0px 0px 1px #fff;
            border:px solid #ccc;
            -moz-border-radius:5px;
            -webkit-border-radius:5px;
            background:#ffffff;
            background:-moz-linear-gradient(#ffffff);
            background:-webkit-gradient(linear, 0 0, 0 100%, from(#f3f3f3), to(#ffffff));
          }
    
          #dropdown_nav li {
      padding:10px 0px 10px 0px;
      float:left;
      position:relative;
      display:inline-block;
          }
    
          #dropdown_nav li a {
            padding:10px 15px 10px 15px;
            text-shadow:-1px 1px 0px #f6f6f6;
            -moz-box-shadow:inset 0px 0px 1px #fff;
            -webkit-box-shadow:inset 0px 0px 1px #fff;
            border-right:px solid #ccc;
          }
          #dropdown_nav li a:hover {
            background:#fffffff;
            background:-moz-linear-gradient(#f9f9f9, #e8e8e8);
            background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9f9f9), to(#e8e8e8));
          }
          #dropdown_nav li a:active {
            background:#e2e2e2;
            background:-moz-linear-gradient(#e2e2e2, #f3f3f3);
            background:-webkit-gradient(linear, 0 0, 0 100%, from(#e2e2e2), to(#f3f3f3));
          }
    
          #dropdown_nav li a.first {
            -moz-border-radius:5px 0px 0px 5px;
            -webkit-border-radius:5px 0px 0px 5px;
          }
          /*#dropdown_nav li a.last {
          -moz-border-radius:0px 5px 5px 0px;
          -webkit-border-radius:0px 5px 5px 0px;
        }
          */
    
           /* Sub-Nav styling */
          #dropdown_nav .sub_nav {
            width:160px;
            padding:0px;
    z-index: 9999;
            position:absolute;
            top:38px;
            left:0px;
            border:px solid #ccc;
            background:#e2e2e2;
          }
    
          #dropdown_nav .sub_nav li {
            width:160px;
            padding:0px;
          }
    
          #dropdown_nav .sub_nav li a {
            display:block;
            border-bottom:px solid #ccc;
            background:-moz-linear-gradient(#f3f3f3, #e2e2e2);
            background:-webkit-gradient(linear, 0 0, 0 100%, from(#f3f3f3), to(#e2e2e2));
          }
          #dropdown_nav .sub_nav li a:hover {
            background:#ffffff;
            background:-moz-linear-gradient(#f9f9f9, #ffffff);
            background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9f9f9), to(#e8e8e8));
          }
          #dropdown_nav .sub_nav li a:active {
            background:#e2e2e2;
            background:-moz-linear-gradient(#e2e2e2, #f3f3f3);
            background:-webkit-gradient(linear, 0 0, 0 100%, from(#e2e2e2), to(#f3f3f3));
          }
    </style>
    <!-- Navigation Start -->
    
    <ul id="dropdown_nav">
    
      <li><a class="first" href="http://www.ablogfairy.com/">Home</a></li>
    
    <li><a href="mailto:blogfairy@gmail.com">Contact</a></li>
    
    <li><a href="Your Link Here">About Me</a></li>
    
     <li><a href="#">Tablescapes</a>
    
       <ul class="sub_nav">
    
        <li><a href="http://www.ablogfairy/p/spring-tablescapes.html">Spring</a></li>
    
        <li><a href="Your Link Here">Summer</a></li>
    
        <li><a href="Your Link Here">Fall</a></li>
    
    <li><a href="Your Link Here">Christmas</a></li>
    
       </ul>
    
      </li>
    
      <li><a href="#">Recipes</a>
    
       <ul class="sub_nav">
    
        <li><a href="http://www.ablogfairy.com/search/label/breakfast">Breakfast</a></li>
    
        <li><a href="Your Link Here">Appetizers</a></li>
    
        <li><a href="http://www.ablogfairy.com/p/entrees.html">Entrees</a></li>
    
      <li><a href="Your Link Here">Dessert</a></li>
    
       </ul>
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.