Page 1 of 2 12 LastLast
Results 1 to 15 of 18
  1. #1
    trishasharma is offline Senior
    Join Date
    May 2012
    Location
    chennai
    Posts
    537
    Thanks
    10
    Thanked 2 Times in 2 Posts
    Feedback Score
    0

    Default Html Drop Down Menu Code.

    How to create Drop Down Navigation menu bar in html/css.

  2. #2
    johnny04 is offline Junior
    Join Date
    Feb 2012
    Posts
    198
    Thanks
    1
    Thanked 2 Times in 2 Posts
    Feedback Score
    0

    Default

    you can read this article.. this might help..
    http://csswizardry.com/2011/02/creat...dropdown-menu/

  3. The Following User Says Thank You to johnny04 For This Useful Post:

    trishasharma (09-18-2012)

  4. #3
    sandyadevi is offline Sophomore
    Join Date
    Sep 2012
    Posts
    88
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Feedback Score
    0

    Default

    Simple code for the drop down list:
    <select>
    <option> xxx</option>
    <option> xxx</option>
    <option> xxx</option>
    </select>
    May it will help.

  5. #4
    eswari is offline Sophomore
    Join Date
    Jun 2011
    Posts
    100
    Thanks
    0
    Thanked 3 Times in 3 Posts
    Feedback Score
    0

    Default

    Its very easy to create a down menu using HTML and CSS. Here is the complete source code.

    http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/


    Hopes it will be useful.

  6. #5
    davidwarner is offline Freshman
    Join Date
    Nov 2012
    Location
    Bangalore,India
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Feedback Score
    0

    Default

    By Using Html Tags we can built drop down list like:

    <select>
    <option> 1</option>
    <option> 2</option>
    <option> 3</option>
    </select>

  7. #6
    sunitha is offline Sophomore
    Join Date
    May 2011
    Location
    United States
    Posts
    94
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Feedback Score
    0

    Default

    Below is a complete code of drop down menu using HTML with example:

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    body{font-family:arial;}
    table{font-size:80%;background:black}
    a{color:black;text-decoration:none;font:bold}
    a:hover{color:#606060}
    td.menu{background:lightblue}
    table.menu
    {
    font-size:100%;
    position:absolute;
    visibility:hidden;
    }
    </style>
    <script>
    function showmenu(elmnt)
    {
    document.getElementById(elmnt).style.visibility="v isible";
    }
    function hidemenu(elmnt)
    {
    document.getElementById(elmnt).style.visibility="h idden";
    }
    </script>
    </head>


    <body>
    <h3>Drop down menu</h3>
    <table width="100%">
    <tr bgcolor="#FF8080">
    <td onmouseover="showmenu('tutorials')" onmouseout="hidemenu('tutorials')">
    <a href="/default.asp">Tutorials</a><br>
    <table class="menu" id="tutorials" width="120">
    <tr><td class="menu"><a href="/html/default.asp">HTML</a></td></tr>
    <tr><td class="menu"><a href="/css/default.asp">CSS</a></td></tr>
    <tr><td class="menu"><a href="/xml/default.asp">XML</a></td></tr>
    <tr><td class="menu"><a href="/xsl/default.asp">XSL</a></td></tr>
    </table>
    </td>
    <td onmouseover="showmenu('scripting')" onmouseout="hidemenu('scripting')">
    <a href="/default.asp">Scripting</a><br>
    <table class="menu" id="scripting" width="120">
    <tr><td class="menu"><a href="/js/default.asp">JavaScript</a></td></tr>
    <tr><td class="menu"><a href="/vbscript/default.asp">VBScript</a></td></tr>
    <tr><td class="menu"><a href="default.asp">DHTML</a></td></tr>
    <tr><td class="menu"><a href="/asp/default.asp">ASP</a></td></tr>
    <tr><td class="menu"><a href="/ado/default.asp">ADO</a></td></tr>
    </table>
    </td>
    <td onmouseover="showmenu('validation')" onmouseout="hidemenu('validation')">
    <a href="/site/site_validate.asp">Validation</a><br>
    <table class="menu" id="validation" width="120">
    <tr><td class="menu"><a href="/web/web_validate.asp">Validate HTML</a></td></tr>
    <tr><td class="menu"><a href="/web/web_validate.asp">Validate XHTML</a></td></tr>
    <tr><td class="menu"><a href="/web/web_validate.asp">Validate CSS</a></td></tr>
    <tr><td class="menu"><a href="/web/web_validate.asp">Validate XML</a></td></tr>
    <tr><td class="menu"><a href="/web/web_validate.asp">Validate WML</a></td></tr>
    </table>
    </td>
    </tr>
    </table>
    <p>Mouse over these options to see the drop down menus</p>
    </body>


    </html>

  8. #7
    prashushri is offline Freshman
    Join Date
    Nov 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Feedback Score
    0

    Default

    <!DOCTYPE html>
    <html>
    <body>

    <h1>My First Heading</h1>

    <p>My first paragraph.</p>

    </body>
    </html>

  9. #8
    rainymoonablc is offline Freshman
    Join Date
    Apr 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Feedback Score
    0

    Default Drop Down Menu Code

    Here is the code for Drop Down:

    <select>
    <option value="car"></option>
    <option value="bike"></option>
    </select>

    If you want to add style in drop down box then by adding classes you can give style to drop down menu.
    <select class="select-box">
    <option value="car" class="option-box">
    <option value="bike" class="option-box">
    </select>


    we make a new css file which name is style.css & write classes in this file.

    .select-box{
    border:1px solid black;

    }

    .option-box{
    background-color:black;
    }


    This drop down box is designed by using html & css. If we talk about the web design that time we use this html/html5, css,/css3.
    If you wants to design or redesign your site then you can contact to innowar which is the India's best company IT Development.

  10. #9
    jamesss is offline Senior
    Join Date
    Mar 2012
    Posts
    878
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Feedback Score
    0

    Default

    You can use this code where can edit this code according to your uses.

    <html>
    <body>
    <TABLE BORDER="0">

    <TD VALIGN="top" Width="200">

    <SPAN onMouseOver="document.all.menu1.style.display = 'block'"
    onMouseOut="document.all.menu1.style.display = 'block'">

    Goodies Tutorials<BR>

    </SPAN>

    <SPAN ID="menu1" onClick="document.all.menu1.style.display = 'none'">

    <A HREF="/tutors/frame1.html">Frames</A><BR>
    <A HREF="/tutors/tbl.html">Tables</A><BR>
    <A HREF="/beyond/dhtml.html">DHTML</A><BR>
    <A HREF="/tutors/forms.html">Forms</A>

    </SPAN>

    </TD>
    </TABLE>
    </body>
    </html>

  11. #10
    tedbrummer is offline Freshman
    Join Date
    Nov 2012
    Location
    San Jose
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Feedback Score
    0

    Default

    Go through this site, here is a complete tutorial for creating dropdown menu using CSS : http://line25.com/tutorials/how-to-c...-dropdown-menu

  12. #11
    sunilmkt's Avatar
    sunilmkt is offline Freshman
    Join Date
    Dec 2012
    Posts
    42
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Feedback Score
    0

    Default

    Which one drop down menu you want to creates? . Means one is for menu navigation and second is for form navigation.
    If you want to navigation for form, just follow simple code as bellow
    <html>
    <head>
    <title>My form</title>
    </head>
    <body>
    <form name="city_list" action="http://www.example.com" method="POST">
    <div align="center">
    <select name="dropdown">
    <option value="Delhi">Delhi</option>
    <option value="Noida">Noida</option>
    <option value="Hyderabad">Hyderabad</option>
    </select>
    </div>
    </form>
    </body>
    </html>

  13. #12
    prince229grips is offline Freshman
    Join Date
    Dec 2012
    Posts
    35
    Thanks
    0
    Thanked 1 Time in 1 Post
    Feedback Score
    0

    Default

    There are so many ways to represent navigation list in html code for a web page. Thanks for sharing all of them here.

  14. #13
    breakingpoint is offline Freshman
    Join Date
    Feb 2013
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Feedback Score
    0

    Default Drop down menue

    <ul>
    <li> about
    <ul>
    <li> Customer</li>
    <li> Me </li>
    </ul>
    </li>
    </ul>

  15. #14
    ramonmlindsey's Avatar
    ramonmlindsey is offline Freshman
    Join Date
    Jan 2013
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Feedback Score
    0

    Default

    To create a drop down menu, firstly import the jquery javascript library in the html page and

    Than in <body> tag
    <a href="#" id="flip">Drop Down</a>

    <fieldset id="user_access" style="display: none;"><ul><li>One</li><li>Two</li><li>Three</li><li>Four</li><li>Five</li><li>Six</li><li>Seven</li></ul></fieldset>
    <script type="text/javascript"> $(document).ready(function(){ $("#flip").click(function(){ $("#user_access").slideToggle("medium"); }); });</script>



    Just add this code and it will create a sample drop-down menu.

  16. #15
    webappe is offline Freshman
    Join Date
    Apr 2013
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Feedback Score
    0

    Default

    <select>
    <option> xxx</option>
    <option> xxx</option>
    <option> xxx</option>
    </select>

Page 1 of 2 12 LastLast

Similar Threads

  1. Importance of HTML code
    By Roy in forum HTML / DHTML
    Replies: 3
    Last Post: 09-10-2012, 04:49 AM
  2. Idea for a html template code onto a blank html document.
    By nauwhgt in forum Web Development - Programming & Coding
    Replies: 1
    Last Post: 12-12-2011, 03:03 AM
  3. Animated Drop Down Navigation Menu
    By JavaScriptBank in forum JavaScript & AJAX
    Replies: 0
    Last Post: 03-08-2010, 06:47 PM
  4. Replies: 1
    Last Post: 07-23-2009, 09:12 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Partners: BOSTON WEB DEVELOPER, LLC   |   WEBCOSMO CLASSIFIEDS