39 users online (0 members and 39 guests)  


  Results 1 to 11 of 11

Related

  1. Replies: 2
  2. onclick help    Forum: Javascript Forum
    Replies: 3
  3. onClick on php?    Forum: PHP Forum
    Replies: 1
  4. Jump Menu covers drop down menu    Forum: HTML Forum
    Replies: 1
  5. Pulldown menu blocks my popup menu    Forum: HTML Forum
    Replies: 9
  1. #1
    Nick-S's Avatar
    New User

    Status
    Offline
    Join Date
    Apr 2011
    Posts
    11

    Onclick menu - Help

    Hey guys

    I need help with a drop down menu I created.
    I want it to reveal other sub-menus once the user clicks on it, instead of hovering with the mouse.
    Is that possible?

    Here is my code:

    HTML
    Code:
    <html>
    <head>
    
     <link rel="stylesheet" type="text/css" href="menu.css">
     </head>
    <body>
    
    <div id="menu">
    <ul>
    <li><a href=""><p>Start</p></a>
    <div class="submenu">
    <ul>
    <li><a href=""><p>Images </p></a></li>
    <li><a href=""><p>Videos</p></a></li>
    <li><a href=""><p>Documents</p></a></li>
    <li><a href=""><p>Settings</p></a></li>
    <li><a href=""><p>Log off</p></a></li>
    </ul>
    </li>
    
    </ul>
    </div>
    </div>
    
    
    </body>
    </html>

    CSS

    Code:
    body{background-color:grey;}
    
    #menu li{width:200px; float:left;list-style-type:none;
    position:relative; top:530px; left:-47px;}
    #menu a{ border-radius:15px; display:block; color:white;
    text-indent:55px; border:1px solid white; background-color:black;
    font-size:18pt; font-weight:bold; text-decoration:none;}
    #menu a:hover{color:black; background: white;}
    
    /*secondary foundation*/
    #menu ul .submenu li{height:75px; float:left; width:250px;}
    #menu li .submenu{position:absolute; left:20px; top:-907px;
    width:10px; height:200px; display:none;}
    
    /*main foundation*/
    #menu li:hover .submenu{display:block; float:left;  height:200px;
    }

  2. #2
    Nick-S's Avatar
    New User

    Status
    Offline
    Join Date
    Apr 2011
    Posts
    11

    Re: Onclick menu - Help

    Bump...

  3. #3
    Nick-S's Avatar
    New User

    Status
    Offline
    Join Date
    Apr 2011
    Posts
    11

    Re: Onclick menu - Help

    Bump...

  4. #4
    Nick-S's Avatar
    New User

    Status
    Offline
    Join Date
    Apr 2011
    Posts
    11

    Re: Onclick menu - Help

    Bump...

  5. #5
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: Onclick menu - Help

    Hi there Nick-S,

    the problem with your desire, is that it would require javascript to fulfill it.

    Relying on javascript for navigation functionality is not a good idea.

    Those with it disabled - ( up to 5% of users ) - will never see your sub-menu.

    Is that what you really want?

  6. #6
    Nick-S's Avatar
    New User

    Status
    Offline
    Join Date
    Apr 2011
    Posts
    11

    Re: Onclick menu - Help

    Quote Originally Posted by coothead View Post
    Hi there Nick-S,

    the problem with your desire, is that it would require javascript to fulfill it.

    Relying on javascript for navigation functionality is not a good idea.

    Those with it disabled - ( up to 5% of users ) - will never see your sub-menu.

    Is that what you really want?
    Thanks for the reply Coothead.
    The reason why I wanted to create a clickable drop down menu, it's because I don't know if it's going to work with mobile devices (iPhone, Android and Windows phone).

    How can a user see my sub menu when using a mobile device?
    I mean there is no such thing as a hover or tap property for mobile devices.

    Is it possible to open the sub menu on a portable device without refreshing the page when tapping on the drop down menu?


    Thanks again!

  7. #7
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: Onclick menu - Help

    Hi there Nick-S,

    I have never coded for "Iphones" etc, and probably never will.

    But I would suggest that the approach to coding for those small items will be entirely different
    to that used for the pc.

    A quick bit of research turned up this information....
    "Since most mobile browsers arenít compatible with Flash, most video and audio players, JavaScript,
    frames, pop-ups, and other things that people like to use to spice up their sites, they are completely
    unusable for those who come to your website through their mobile phones."
    Whether this applies to the Iphone, I don't know.

    Further reading:-


  8. #8
    Nick-S's Avatar
    New User

    Status
    Offline
    Join Date
    Apr 2011
    Posts
    11

    Re: Onclick menu - Help

    Quote Originally Posted by coothead View Post
    Hi there Nick-S,

    I have never coded for "Iphones" etc, and probably never will.

    But I would suggest that the approach to coding for those small items will be entirely different
    to that used for the pc.

    A quick bit of research turned up this information....


    Whether this applies to the Iphone, I don't know.

    Further reading:-


    Thanks for the links Coothead.

  9. #9
    Tolskey's Avatar
    New User

    Status
    Offline
    Join Date
    Sep 2014
    Posts
    1

    Re: Onclick menu - Help

    I also want a menu that shows sub menus when you click them and not just on hover. I understand that 5% of users will never see it but using java script. Is there no way to show these users a different version?

  10. #10
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: Onclick menu - Help

    Hi there Tolskey,

    and a warm welcome to these forums.

    Here is a CSS example, using the O.P's HTML code...
    Code:
    
    <!DOCTYPE html>
    <html  lang="en">
    <head>
    
    <meta charset="utf-8">
    
    <title>untitled document</title>
    
    <style media="screen">
    html,body {
        height:100%;
        margin:0;
        background-color:grey;
     }
    #menu, .submenu {
        padding:0;
        margin:0;
        list-style-type:none;
        font-family:verdana,arial,hevetica, sans-serif;
        font-size:100%;
     }
    #menu {
        position:absolute;
        bottom:8px;
        margin-left:8px
     }
    #menu li {
        position:relative; 
        float:left;
     }
    #menu input {
        display:none;
     } 
    #menu input + label:before{
        content:'show';
     }
    #menu input:checked + label:before {
        content:'hide';
     }  
    #menu label, #menu a { 
        display:block;
        width:200px;
        line-height:75px;  
        border:1px solid #fff; 
        border-radius:15px;
        background-color:#000;
        font-size:150%; 
        font-weight:bold; 
        color:#fff;
        text-indent:55px;
        text-decoration:none;
        cursor:pointer;
     }
    #menu .submenu {
        position:absolute; 
        top:-407px;
        display:none;
     }
    #menu  .submenu li {
        margin:2px 0;
     }
    #menu .submenu a {
       width:250px;
     }
    #menu input:checked ~ .submenu {
        display:block; 
     }
    </style>
    
    </head>
    <body>
    
    <ul id="menu">
     <li><input  id="cb" type="checkbox"><label for="cb"></label>
      <ul class="submenu">
       <li><a href="#">Images</a></li>
       <li><a href="#">Videos</a></li>
       <li><a href="#">Documents</a></li>
       <li><a href="#">Settings</a></li>
       <li><a href="#">Log off</a></li>
      </ul></li>
    </ul>
    
    </body>
    </html>
    Give us your specific code and requirements if you
    are unable to implement this method satisfactorily.

  11. #11
    bidya's Avatar
    New User

    Status
    Offline
    Join Date
    Jan 2015
    Posts
    1

    Re: Onclick menu - Help

    Hi Below is my code(PFB)
    I want horizontal submenu in this code and submenu should be of full width.
    thanks
    <link href="Styles/onclick.css" rel="stylesheet" />
    </head>
    <body>
    <form id="form1" runat="server">
    <div id="menu">
    <ul>
    <li><a href="#">Menu1</a>
    <ul class="dropdown d1">
    <li><a href="#">Submenu1</a> </li>
    <li><a href="#">Submenu2</a> </li>
    </ul>
    </li>

    <li class="fly"><a href="#">Menu2</a>
    <ul class="dropdown d2">
    <li><a href="#">Submenu1</a> </li>
    <li><a href="#">Submenu2</a> </li>
    </ul>
    </li>

    <li class="fly"><a href="#">Menu3</a>
    <ul class="dropdown d2">
    <li><a href="#">Submenu1</a> </li>
    <li><a href="#">Submenu2</a> </li>
    <li><a href="#">Submenu3</a> </li>
    </ul>
    </li>

    </ul>

    </div>
    </form>
    </body>
    </html>
    -----------------------------------------------------
    #menu
    {
    position:relative;
    background:url(../Images/header_navigation_first.png);
    z-index:500;
    width:100%;
    margin:0 0 -5px 0;
    }

    #menu ul
    {
    padding:0;
    list-style:none;
    font-family:Segoe UI;
    /*Archives*/
    }

    #menu ul ul
    {
    position:absolute;
    left:-9999px;
    top:30px;
    background:url(../Images/header_navigation_second.png);
    margin:0 0 0 5px;
    width:100%;

    }

    second ul ul ul
    {
    position:absolute;
    left:-9999px;
    top:-5px;
    width:100%
    }

    #menu ul li
    {
    /*background:#fff; */
    margin-right:5px;
    float:left;
    position:absolute;
    width:100%;
    /*archives LI*/
    }

    #menu ul li a
    {
    display:block;
    float:left;
    text-decoration:none;
    width:100%
    }

    #menu ul ul li
    {
    width:100%;

    }

    #menu ul ul li a
    {
    width:100%;
    }


    #menu ul li a:active + ul.dropdown
    {
    left:-5px;

    }

    #menu ul li a:focus + ul.d1,
    #menu ul li a:focus + ul.d2
    {
    left:-5px;
    }

    #menu ul li ul.dropdown:hover
    {
    left:-5px;
    }

    #menu ul
    {
    font-size: 20px;
    }
    #menu ul ul
    {
    font-size: 12px;
    }

    #menu {
    /*background-color: #000;*/
    width: 100%;
    vertical-align: top;
    height: 30px;
    margin:-4px;
    }

    #menu ul{
    padding: 0px;
    list-style: none;
    margin: 0px;
    }

    /*#menu ul li
    {
    width: 100px;
    background-color: black;
    line-height: 50;
    vertical-align: middle;
    }
    */

    #menu ul li
    {
    width: 100px;
    line-height: 50;
    position: relative;
    vertical-align:middle;
    /*archives reports settings*/
    }

    #menu ul li a{
    display: block;
    color:White;
    line-height: 30px;
    vertical-align:middle;
    width:100%;
    /*archives reports settings li full hover gray*/
    }

    #menu ul li a:hover{
    color:Gray;
    /* background: #333;*/
    background-image:url(../Images/header_navigation_second.png);
    width:100% ;
    margin-left:auto;
    }
    Last edited by bidya; 01-27-2015 at 10:23 AM.