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.

3 comments:

  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
  2. Nice one, dude! Very inspiring and easy to read. Will definitely share this on Fb & Insta. www.caramembuatwebsiteku.com

    ReplyDelete
  3. 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. JN0-334 Practice Test Questions

    ReplyDelete