Expandable Menu Issue

shivkumar · February 9, 2018, 4:17am

What is the error in this menu . It’s not expandable even I enter correct details to my knowledge. Please tell me.

HTML is:

<div id="ulMenuList" class="urbangreymenu">
<h3 class="headerbar"><a title="About Us">About Us</a></h3>
<ul class="submenu">
<li><a href="#" title="Organization">Organization</a></li>
<li><a href="#" title="Management team">Management team</a></li>
</ul>
<h3 class="headerbar"><a title="Commercial Information">Commercial Information</a></h3>
<ul class="submenu">
<li><a href="#" title="Applicable Policies">Applicable Policies</a></li>
</ul>
<h3 class="headerbar"><a title="Tariff Regulations">Tariff Regulations</a></h3>
<ul class="submenu">
<li><a href="#" title="Tariff Regulations">Tariff Regulations</a></li>
</ul>
</div>

CSS CODE:

 
        .urbangreymenu
        {
            font-family: Verdana;
            font-size: 11px;
            margin: 0;
            margin: 0 0 0 0px;
            width: 200px;
        }
        
        
      
        
        .urbangreymenu .headerbar
        {
            margin-bottom: 0px;
            margin-top: 3px; /* text-transform: uppercase; */
            padding: 0 0 0 0;
        }
        .urbangreymenu ul
        {
            padding: 0;
            margin: 0;
            list-style-type: none;
            margin-bottom: 0px;
            padding: 0px 0 0px 0;
        }
        .urbangreymenu ul li
        {
            width: 200px;
            margin: 0;
            padding: 0;
            border-bottom: 1px #d2dbea solid;
            padding: 2px 0 2px 0;
            font-weight: normal;
        }
        .urbangreymenu ul li a, ul li a:visited
        {
            display: block;
            text-decoration: none;
            height: 15px;
            font-size: 10px;
            padding: 3px 0 3px 8px;
        }
        .urbangreymenu ul li
        {
            border-left: 20px solid #69c;
            width: 150px;
            margin-bottom: 0;
        }
        .urbangreymenu ul li a
        {
            display: block;
            color: #369;
            display: block;
            text-decoration: none;
            height: 15px;
            font-size: 10px;
            padding: 3px 0 3px 8px;
            width: 170px;
        }
        .urbangreymenu ul li a:hover
        {
            display: block;
            color: #369;
            background-color: #eee;
            padding: 3px 0 3px 8px;
            font-size: 10px;
        }
        .urbangreymenu li
        {
            list-style-type: none;
        }
        .urbangreymenu h2
        {
            margin-top: 1.5em;
        }
        
        .urbangreymenu h3.headerbar
        {
            font-size: 10px;
        }
        /* Header links styling */
        .urbangreymenu h3.headerbar a
        {
            color: Navy;
            display: block; /*border-top: 1px solid #36a;
		border-right: 1px solid #36a;*/
            background: #ddd url('https://acceptsms.000webhostapp.com/wp-content/uploads/2018/02/down.png') no-repeat 98% 50%;
            padding: 5px 6px;
            text-decoration: none;
        }
        .urbangreymenu h3.headerbar a:hover
        {
            color: #ff0000;
            background: #69c url('https://acceptsms.000webhostapp.com/wp-content/uploads/2018/02/down.png') no-repeat 98% 50%;
            border-left: 20px solid #69c;
        }
        .urbangreymenu h3.selected a
        {
            background: #69c url('https://acceptsms.000webhostapp.com/wp-content/uploads/2018/02/down.png') no-repeat 98% 50%;
            color: #fff;
            border-left: 20px solid #69c; /*padding: 3px 6px;*/
        }
        .urbangreymenu h3.selected a:hover
        {
            background: #69c url('https://acceptsms.000webhostapp.com/wp-content/uploads/2018/02/down.png') no-repeat 98% 50%; /*color: #36a;*/
            color: #fff;
            border-left: 20px solid #69c;
        }

JS


$(function(){

  $(".urbangreymenu h3").click(function(){
  $(".urbangreymenu ul").slideUp();
    if ($(this).next().is(":hidden")){
    $(this).next().slideDown();
    }
  
  
  });
  

});

Paul_Wilkins · February 9, 2018, 4:29am

It looks like you’re missing a fullstop.

// $("urbangreymenu h3").click(function(){
$(".urbangreymenu h3").click(function(){

shivkumar · February 9, 2018, 4:43am

Nog working …

Paul_Wilkins · February 9, 2018, 4:49am

That’s odd, it works for me. https://jsfiddle.net/h30gd9mo/

shivkumar · February 9, 2018, 5:05am

Yes, I visit your link and see it’s work but why it not run on https://htmledit.squarefree.com. looks like it my mistake about I don’t know what I edit before entering JavaScript code. Means that,
What is that tag before

<script>$(function(){
  $(".urbangreymenu h3").click(function(){
  $(".urbangreymenu ul").slideUp();
    if ($(this).next().is(":hidden")){
    $(this).next().slideDown();
    }
  });
});</script>

shivkumar · February 9, 2018, 5:06am

I am editing like this:

<script>$(function(){
  $(".urbangreymenu h3").click(function(){
  $(".urbangreymenu ul").slideUp();
    if ($(this).next().is(":hidden")){
    $(this).next().slideDown();
    }
  });
});</script><style>.urbangreymenu
        {
            font-family: Verdana;
            font-size: 11px;
            margin: 0;
            margin: 0 0 0 0px;
            width: 200px;
        }
        
        
      
        
        .urbangreymenu .headerbar
        {
            margin-bottom: 0px;
            margin-top: 3px; /* text-transform: uppercase; */
            padding: 0 0 0 0;
        }
        .urbangreymenu ul
        {
            padding: 0;
            margin: 0;
            list-style-type: none;
            margin-bottom: 0px;
            padding: 0px 0 0px 0;
        }
        .urbangreymenu ul li
        {
            width: 200px;
            margin: 0;
            padding: 0;
            border-bottom: 1px #d2dbea solid;
            padding: 2px 0 2px 0;
            font-weight: normal;
        }
        .urbangreymenu ul li a, ul li a:visited
        {
            display: block;
            text-decoration: none;
            height: 15px;
            font-size: 10px;
            padding: 3px 0 3px 8px;
        }
        .urbangreymenu ul li
        {
            border-left: 20px solid #69c;
            width: 150px;
            margin-bottom: 0;
        }
        .urbangreymenu ul li a
        {
            display: block;
            color: #369;
            display: block;
            text-decoration: none;
            height: 15px;
            font-size: 10px;
            padding: 3px 0 3px 8px;
            width: 170px;
        }
        .urbangreymenu ul li a:hover
        {
            display: block;
            color: #369;
            background-color: #eee;
            padding: 3px 0 3px 8px;
            font-size: 10px;
        }
        .urbangreymenu li
        {
            list-style-type: none;
        }
        .urbangreymenu h2
        {
            margin-top: 1.5em;
        }
        
        .urbangreymenu h3.headerbar
        {
            font-size: 10px;
        }
        /* Header links styling */
        .urbangreymenu h3.headerbar a
        {
            color: Navy;
            display: block; /*border-top: 1px solid #36a;
		border-right: 1px solid #36a;*/
            background: #ddd url('https://acceptsms.000webhostapp.com/wp-content/uploads/2018/02/down.png') no-repeat 98% 50%;
            padding: 5px 6px;
            text-decoration: none;
        }
        .urbangreymenu h3.headerbar a:hover
        {
            color: #ff0000;
            background: #69c url('https://acceptsms.000webhostapp.com/wp-content/uploads/2018/02/down.png') no-repeat 98% 50%;
            border-left: 20px solid #69c;
        }
        .urbangreymenu h3.selected a
        {
            background: #69c url('https://acceptsms.000webhostapp.com/wp-content/uploads/2018/02/down.png') no-repeat 98% 50%;
            color: #fff;
            border-left: 20px solid #69c; /*padding: 3px 6px;*/
        }
        .urbangreymenu h3.selected a:hover
        {
            background: #69c url('https://acceptsms.000webhostapp.com/wp-content/uploads/2018/02/down.png') no-repeat 98% 50%; /*color: #36a;*/
            color: #fff;
            border-left: 20px solid #69c;
        }</style><div id="ulMenuList" class="urbangreymenu">
<h3 class="headerbar"><a title="About Us">About Us</a></h3>
<ul class="submenu">
<li><a href="#" title="Organization">Organization</a></li>
<li><a href="#" title="Management team">Management team</a></li>
</ul>
<h3 class="headerbar"><a title="Commercial Information">Commercial Information</a></h3>
<ul class="submenu">
<li><a href="#" title="Applicable Policies">Applicable Policies</a></li>
</ul>
<h3 class="headerbar"><a title="Tariff Regulations">Tariff Regulations</a></h3>
<ul class="submenu">
<li><a href="#" title="Tariff Regulations">Tariff Regulations</a></li>
</ul>
</div>

Could make it correct and send me pls. By copy past…

Mittineague · February 9, 2018, 5:08am

What error messages do you see in your browser’s dev tools console?

Paul_Wilkins · February 9, 2018, 5:09am

[quote=“shivkumar, post:5, topic:288511, full:true”]
Yes, I visit your link and see it’s work but why it not run on https://htmledit.squarefree.com.[/quote]

Are you including the jQuery library? That’s required for the scripting code that you have there.

shivkumar · February 9, 2018, 5:25am

Not included . I don’t know what it’s code.

shivkumar · February 9, 2018, 5:26am

No error but not working.
Could you tell me what I include before [Script]

Mittineague · February 9, 2018, 5:36am

I’m not getting any error messages either, but it works for me.

The last main “container element” closing tag of the body section?

shivkumar · February 9, 2018, 9:55am

Yes, Where you are run this code for preview

TechnoBear · February 9, 2018, 10:00am

You need to put the script immediately before the closing </body> tag, after everything else.

TechnoBear · February 9, 2018, 11:36am

If you are using the code you linked to in your other topic, have you remembered to correct the errors in it first?

shivkumar · February 9, 2018, 2:18pm

Are you all not getting What I want to ask? I think…

My CSS and HTML and JavaScript is right as said @Paul_Wilkins and he provides a link where I can view preview but I dont know which code I use before edit this code becouse it’s includes jquery .

$(function(){
  $(".urbangreymenu h3").click(function(){
  $(".urbangreymenu ul").slideUp();
    if ($(this).next().is(":hidden")){
    $(this).next().slideDown();
    }
  });
});

For an example if we write JavaScript code we use <script> ..abcd .. </script> and when we use Html we use <HTML><HEAD><TITLE></TITLE></HEAD><BODY></BODY></HTML> but I don’t know what I write before edit jquery code.
That why I am not able to work on this code even it corrected by @Paul_Wilkins
Could you all tell me what I right before script edit…

WebMachine · February 9, 2018, 2:35pm

You enclose the JQuery in <script> tags also, because it is just a JavaScript library.

But you need to include the JQuery library before your code can be implemented.

One way to do this is to add <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js'></script> in your <head></head> or better still, just before the closing </body> tag. Just make sure it comes before your JQuery code.

shivkumar · February 9, 2018, 2:45pm

Thank you but same problem nog working.

Please find my mistake, I am editing:

<div id="ulMenuList" class="urbangreymenu">
<h3 class="headerbar"><a title="About Us">About Us</a></h3>
<ul class="submenu">
<li><a href="#" title="Organization">Organization</a></li>
<li><a href="#" title="Management team">Management team</a></li>
</ul>
<h3 class="headerbar"><a title="Commercial Information">Commercial Information</a></h3>
<ul class="submenu">
<li><a href="#" title="Applicable Policies">Applicable Policies</a></li>
</ul>
<h3 class="headerbar"><a title="Tariff Regulations">Tariff Regulations</a></h3>
<ul class="submenu">
<li><a href="#" title="Tariff Regulations">Tariff Regulations</a></li>
</ul>
</div>
<style>.urbangreymenu
        {
            font-family: Verdana;
            font-size: 11px;
            margin: 0;
            margin: 0 0 0 0px;
            width: 200px;
        }
        
        
      
        
        .urbangreymenu .headerbar
        {
            margin-bottom: 0px;
            margin-top: 3px; /* text-transform: uppercase; */
            padding: 0 0 0 0;
        }
        .urbangreymenu ul
        {
            padding: 0;
            margin: 0;
            list-style-type: none;
            margin-bottom: 0px;
            padding: 0px 0 0px 0;
        }
        .urbangreymenu ul li
        {
            width: 200px;
            margin: 0;
            padding: 0;
            border-bottom: 1px #d2dbea solid;
            padding: 2px 0 2px 0;
            font-weight: normal;
        }
        .urbangreymenu ul li a, ul li a:visited
        {
            display: block;
            text-decoration: none;
            height: 15px;
            font-size: 10px;
            padding: 3px 0 3px 8px;
        }
        .urbangreymenu ul li
        {
            border-left: 20px solid #69c;
            width: 150px;
            margin-bottom: 0;
        }
        .urbangreymenu ul li a
        {
            display: block;
            color: #369;
            display: block;
            text-decoration: none;
            height: 15px;
            font-size: 10px;
            padding: 3px 0 3px 8px;
            width: 170px;
        }
        .urbangreymenu ul li a:hover
        {
            display: block;
            color: #369;
            background-color: #eee;
            padding: 3px 0 3px 8px;
            font-size: 10px;
        }
        .urbangreymenu li
        {
            list-style-type: none;
        }
        .urbangreymenu h2
        {
            margin-top: 1.5em;
        }
        
        .urbangreymenu h3.headerbar
        {
            font-size: 10px;
        }
        /* Header links styling */
        .urbangreymenu h3.headerbar a
        {
            color: Navy;
            display: block; /*border-top: 1px solid #36a;
		border-right: 1px solid #36a;*/
            background: #ddd url('https://acceptsms.000webhostapp.com/wp-content/uploads/2018/02/down.png') no-repeat 98% 50%;
            padding: 5px 6px;
            text-decoration: none;
        }
        .urbangreymenu h3.headerbar a:hover
        {
            color: #ff0000;
            background: #69c url('https://acceptsms.000webhostapp.com/wp-content/uploads/2018/02/down.png') no-repeat 98% 50%;
            border-left: 20px solid #69c;
        }
        .urbangreymenu h3.selected a
        {
            background: #69c url('https://acceptsms.000webhostapp.com/wp-content/uploads/2018/02/down.png') no-repeat 98% 50%;
            color: #fff;
            border-left: 20px solid #69c; /*padding: 3px 6px;*/
        }
        .urbangreymenu h3.selected a:hover
        {
            background: #69c url('https://acceptsms.000webhostapp.com/wp-content/uploads/2018/02/down.png') no-repeat 98% 50%; /*color: #36a;*/
            color: #fff;
            border-left: 20px solid #69c;
        }</style>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js'>
<script>$(function(){
  $(".urbangreymenu h3").click(function(){
  $(".urbangreymenu ul").slideUp();
    if ($(this).next().is(":hidden")){
    $(this).next().slideDown();
    }
  });
});</script>

chrisofarabia · February 9, 2018, 2:46pm

Firstly, you need to put the content within the <style></style> tags inside your head, not in the body.

Secondly, add a closing <script> tag to the line with the jQuery library in it. It should look like this

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js'></script>

WebMachine · February 9, 2018, 2:48pm

This should be:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js'></script>

Notice the closing </script> tag.
And then:

<script>
// Your JQuery code goes here
</script>

shivkumar · February 9, 2018, 3:49pm

Finally It run thank you, thank you so much all masters.
You all are genius.

The last issue is all options in menu is expandable default. how to we make close all option in each other default