submenu should look a part of Main tab RSS

• • Reply
  

  Hunain Hafee...

  Member

  238 Points

  639 Posts

  submenu should look a part of Main tab

  Nov 19, 2012 06:55 PM|LINK

  i developed menu, vertical

  it has also sub menu (ul within li) 

  now i want that when i click on main tab and when it toggles down submenu items, then it should seem that it is submenu, it should look like part of Main tab, that it has been expanded from or originated from main tab, 

  here is my code :

  <link href="jquery-1.4.2.min.js" type="text/javascript" />
      <script src="jquery-1.4.2.min.js" type="text/javascript"></script>
      <script type="text/javascript">
       $(document).ready(function(){
        $("#tabJB").click(function(){
         $("#subMenu").toggle("slow","swing");
      });
    });
      </script>
  
  
  <div style="position:fixed">
             <ul>
              <li><a href="#home">Home</a></li>
              <li><a href="#news">Profile</a></li>
              <li id="tabJB"><a href="#">Job Budget</a>
               <ul id="subMenu" style="display:none">
                <li class="backli" ><a href="jobBudget.aspx">Submit</a></li>
                <li><a href="subAdminEditJobBudget.aspx">Edit</a></li>
               </ul>
              </li>
              <li><a href="Vacancies.aspx">Vacancies</a></li>
              <li><a href="superAdmins.aspx">Advertisements</a></li>
            </ul>
           </div>
          </div>

  ul
  {
      list-style-type:none;
      margin:0;
      padding:0;
  }
      a:link,a:visited
  {
      display:block;
      color: white;
      
      background-color:#3db5e2;
      width:125px;
      text-align:center;
      padding:6px;
      text-decoration:none;
      text-transform:uppercase;
      font-size: .9em;
  }
      a:hover,a:active
  {
      background-color: skyblue;
  }

  
  
  
  

  Hunain Hafeez
  • Edited by Hunain Hafeez on Nov 19, 2012 06:55 PM
• • Reply
  

  asteranup

  All-Star

  30184 Points

  4906 Posts

  Re: submenu should look a part of Main tab

  Nov 20, 2012 04:57 AM|LINK

  Hi,

  Try this-

  http://jsfiddle.net/asteranup/mxWUT/

  Thanks & Regards
  Anup Das Gupta
  Mark as Answer if you feel so. Visit My Blog
  • Marked as answer by Hunain Hafeez on Nov 20, 2012 12:52 PM
• • Reply
  

  raju dasa

  Star

  14746 Points

  2499 Posts

  Re: submenu should look a part of Main tab

  Nov 20, 2012 05:26 AM|LINK

  Hi,

  To imply some nodes as childs, try appling this style (applies to childs)

  assuming style rule for childs is to move them right. if further styling is required, add ur rules in it.

  ul ul a:link, ul ul a:visited, ul ul li{
    text-align:right;
    }

  
  
  

  Happy Coding ! Mark as Answer if it helps.
  rajudasa.blogspot.com  ||  blog@opera
  • Marked as answer by Hunain Hafeez on Nov 20, 2012 12:52 PM