menu
Ad goes here

Thursday, 27 September 2012

How to create Multi Labels Vertical Menu, Horizontal Menu, Tabbed Panel, Accordion, Collapsible Panel and Tool Tips within a minute?

If you start to develop any website then the above things will be most useful to make your website more user-friendly and interactive. But most of the developers spend lots of time to create those things where they can create within a minute.

Let’s see how you can create it within a minute.

These days Adobe Dreamweaver is most useful software in the Web Development. So I assumed that you know about the Adobe Dreamweaver and have installed Dreamweaver software.


Open your Dreamweaver [I am using Adobe Dreamweaver CS4 and this feature will not be available in older version] software and create a new HTML document.

Save it in a folder [MyKnowledge] and give a proper name. Like verticalmenu.html for Vertical Menu, horizontalmenu.html for Horizontal Menu, tabbedpanel.html for Tabbed panel etc.

Vertical Menu:



  1. Save the file verticalmenu.html from Dreamweaver. File > Save
  2. Click inside the <body> tag or where you want to put your vertical menu.
  3. Go to Insert link from the Dreamweaver top menu and click on Spry Menu Bar. Insert > Spry > Spry Menu Bar
  4. You will get a popup box with two options Horizontal and Vertical. Choose Vertical.
  5. Save this file. Now it's ready to view.
Code will be like this:
<!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <html  xmlns="http://www.w3.org/1999/xhtml">

  <head>

  <meta  http-equiv="Content-Type" content="text/html;  charset=utf-8" />

  <title>Vertical  Menu</title>

  <script  src="SpryAssets/SpryMenuBar.js"  type="text/javascript"></script>

  <link  href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" 
type="text/css" />

  </head>


<body>

  <ul id="MenuBar1"  class="MenuBarVertical">

  <li><a class="MenuBarItemSubmenu"  href="#">Item 1</a>

  <ul>

  <li><a  href="#">Item 1.1</a></li>

  <li><a  href="#">Item 1.2</a></li>

  <li><a  href="#">Item 1.3</a></li>

  </ul>

  </li>

  <li><a href="#">Item 2</a></li>

  <li><a class="MenuBarItemSubmenu"  href="#">Item 3</a>

  <ul>

  <li><a  class="MenuBarItemSubmenu" href="#">Item 3.1</a>

  <ul>

  <li><a  href="#">Item 3.1.1</a></li>

  <li><a  href="#">Item 3.1.2</a></li>

  </ul>

  </li>

  <li><a  href="#">Item 3.2</a></li>

  <li><a  href="#">Item 3.3</a></li>

  </ul>

  </li>

  <li><a href="#">Item 4</a></li>

  </ul>

  <script  type="text/javascript">

  <!--

  var MenuBar1 = new  Spry.Widget.MenuBar("MenuBar1", 
{imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

  //-->

  </script>

  </body>

  </html>


 

Horizontal Menu:


  1. Save the file horizontalmenu.html from Dreamweaver. File > Save
  2. Click inside the <body> tag or where you want to put your horizontal menu.
  3. Go to Insert link from the Dreamweaver top menu and click on Spry Menu Bar. Insert > Spry > Spry Menu Bar
  4. You will get a popup box with two options Horizontal and Vertical. Choose Horizontal.
  5. Save this file. Now it's ready to view.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0  Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml">

  <head>

  <meta http-equiv="Content-Type"  content="text/html; charset=utf-8" />

  <title>Horizontal Menu</title>

  <script src="SpryAssets/SpryMenuBar.js"  type="text/javascript"></script>

  <link  href="SpryAssets/SpryMenuBarHorizontal.css"  rel="stylesheet"
type="text/css" />

  </head>


<body>

  <ul id="MenuBar1"  class="MenuBarHorizontal">

  <li><a  class="MenuBarItemSubmenu" href="#">Item 1</a>

  <ul>

  <li><a  href="#">Item 1.1</a></li>

  <li><a  href="#">Item 1.2</a></li>

  <li><a  href="#">Item 1.3</a></li>

  </ul>

  </li>

  <li><a  href="#">Item 2</a></li>

  <li><a  class="MenuBarItemSubmenu" href="#">Item 3</a>

  <ul>

  <li><a  class="MenuBarItemSubmenu" href="#">Item 3.1</a>

  <ul>

  <li><a href="#">Item 3.1.1</a></li>

  <li><a href="#">Item 3.1.2</a></li>

  </ul>

  </li>

  <li><a  href="#">Item 3.2</a></li>

  <li><a  href="#">Item 3.3</a></li>

  </ul>

  </li>

  <li><a  href="#">Item 4</a></li>

  </ul>

  <script type="text/javascript">

  <!--

  var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", 
{imgDown:"SpryAssets/SpryMenuBarDownHover.gif", 
imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

  //-->

  </script>

  </body>

  </html>


Tabbed Panels


  1. Save the file tabbedpanels.html from Dreamweaver. File > Save
  2. Click inside the <body> tag or where you want to put your panel.
  3. Go to Insert link from the Dreamweaver top menu and click on Spry Menu Bar. Insert > Spry > Spry Tabbed Panels
  4. Code will be added automatically.
  5. Save this file and view it on the browser.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0  Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml">

  <head>

  <meta http-equiv="Content-Type"  content="text/html; charset=utf-8" />

  <title>Tabbed Panels</title>

  <script src="SpryAssets/SpryTabbedPanels.js" 
type="text/javascript"></script>

  <link href="SpryAssets/SpryTabbedPanels.css" 
rel="stylesheet" type="text/css" />

  </head>


 <body>

  <div id="TabbedPanels1"  class="TabbedPanels">

   <ul  class="TabbedPanelsTabGroup">

   <li  class="TabbedPanelsTab" tabindex="0">Tab 1</li>

   <li  class="TabbedPanelsTab" tabindex="0">Tab 2</li>

   </ul>

   <div  class="TabbedPanelsContentGroup">

   <div class="TabbedPanelsContent">Content  1</div>

   <div  class="TabbedPanelsContent">Content 2</div>

   </div>

  </div>

  <script type="text/javascript">

  <!--

   var TabbedPanels1 = new  Spry.Widget.TabbedPanels("TabbedPanels1");

   //-->

  </script>

  </body>

  </html>


Accordion


  1. Save the file accordion.html from Dreamweaver. File > Save
  2. Click inside the <body> tag or where you want to put your accordion menu.
  3. Go to Insert link from the Dreamweaver top menu and click on Spry Menu Bar. Insert > Spry > Spry Accordion
  4. Code will be added automatically.
  5. Save this file and view it on the browser.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0  Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml">

  <head>

  <meta http-equiv="Content-Type"  content="text/html; charset=utf-8" />

  <title>Accordian</title>

  <script src="SpryAssets/SpryAccordion.js" 
type="text/javascript"></script>

  <link href="SpryAssets/SpryAccordion.css" 
rel="stylesheet" type="text/css" />

  </head>


<body>

  <div id="Accordion1"  class="Accordion" tabindex="0">

  <div  class="AccordionPanel">

  <div  class="AccordionPanelTab">Label 1</div>

  <div  class="AccordionPanelContent">Content 1</div>

  </div>

  <div  class="AccordionPanel">

  <div  class="AccordionPanelTab">Label 2</div>

  <div  class="AccordionPanelContent">Content 2</div>

  </div>

  </div>

  <script type="text/javascript">

  <!--

  var Accordion1 = new  Spry.Widget.Accordion("Accordion1");

  //-->

  </script>

  </body>

  </html>


 

Collapsible Panel


  1. Save the file collapsible.html from Dreamweaver. File > Save
  2. Click inside the <body> tag or where you want to put your collapsible panel.
  3. Go to Insert link from the Dreamweaver top menu and click on Spry Menu Bar. Insert > Spry > Spry Collapsible panel
  4. Code will be added automatically.
  5. Save this file and view it on the browser.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0  Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml">

  <head>

  <meta http-equiv="Content-Type"  content="text/html; charset=utf-8" />

  <title>Collapsible Panel</title>

  <script  src="SpryAssets/SpryCollapsiblePanel.js" 
type="text/javascript"></script>

  <link  href="SpryAssets/SpryCollapsiblePanel.css"
rel="stylesheet"  type="text/css" />

  </head>


<body>

  <div id="CollapsiblePanel1"  class="CollapsiblePanel">

  <div  class="CollapsiblePanelTab" tabindex="0">Tab</div>

  <div  class="CollapsiblePanelContent">Content</div>

  </div>

  <script type="text/javascript">

  <!--

  var CollapsiblePanel1 = new  Spry.Widget.CollapsiblePanel("CollapsiblePanel1");

  //-->

  </script>

  </body>

  </html>




Tool Tips:


  1. Save the file tooltips.html from Dreamweaver. File > Save
  2. Click inside the <body> tag or where you want to put your Too Tips.
  3. Go to Insert link from the Dreamweaver top menu and click on Spry Menu Bar. Insert > Spry > Spry Tooltip
  4. Code will be added automatically.
  5. Save this file and view it on the browser.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml">

  <head>

  <meta http-equiv="Content-Type"  content="text/html; charset=utf-8" />

  <title>Tool Tips</title>

  <script src="SpryAssets/SpryTooltip.js" 
type="text/javascript"></script>

  <link href="SpryAssets/SpryTooltip.css" 
rel="stylesheet" type="text/css" />

  </head>


<body>

  <span id="sprytrigger1">Tooltip trigger goes  here.</span>

  <div class="tooltipContent"  id="sprytooltip1">
Tooltip content goes here.</div>

  <script type="text/javascript">

  <!--

  var sprytooltip1 = new  Spry.Widget.Tooltip("sprytooltip1",
"#sprytrigger1");

  //-->

  </script>

  </body>

  </html>



Note: All above code are auto generated by Dreamweaver CS4. Please do the chages according to your requirement.

1 comment:

  1. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog.
    Really very informative post you shared here. Kindly keep blogging.
    If anyone wants to become a Front end developer learn from Javascript Online Training from India .
    or learn thru JavaScript Online Training from India.
    Nowadays JavaScript has tons of job opportunities on various vertical industry. ES6 Training in Chennai

    ReplyDelete

Books for you (Crafted with )