CODEWITHSUNDEEP
javascripthtmlcss
Coler234
Coler234

Reputation: 67

HTML/CSS Not Working or Javascript - Dropdown Menu

I am trying to create a simple dropdown menu but it isn't doing anything and I don't know why. The javascript should toggle the class which if off: should hide the language types and slide the other tabs up(Contact). When I click the button it does completely nothing. The class dp-click is what you click to toggle the menu. The class dp-contents is the languages which should toggle the visibility of them upon clicking dp-click. Here is the html.

<html>

    <head>
        <link href="Style.css" type="text/css" rel="stylesheet">
        <title>Enforcext</title>
    </head>

    <div class="nav">
        <div class="container">
            <img src="http://www.destinygamewiki.com/images/7/72/Enforcer_medal1.png" width="50px">
            <ul class="links">
                <li style="margin: 5px; margin-left: 15px;"><a href="Index.html">Home</li>
                <div class="lt">
                    <div class="dp-click">
                        <li style="margin: 5px; margin-left: 15px" class="dp-click"><a href="#" class="dp-click">Languages</a></li>
                    </div>
                </div>
            </ul>
            <div class="lt">
                <ul class="dp-contents links">
                    <li style="margin: 5px; margin-left: 25px"><a href="PHP.php">PHP</a></li>
                    <li style="margin: 5px; margin-left: 25px"><a href="HTML.html">HTML</a></li>
                    <li style="margin: 5px; margin-left: 25px"><a href="CSS.html">CSS</a></li>
                    <li style="margin: 5px; margin-left: 25px"><a href="Javascript.html">Javascript</a></li>
                </ul>
            </div class="lt">
            <ul class="links">
                <li style="margin: 5px; margin-left: 15px;"><a href="Contact.php">Contact</a></li>
            </ul>
        </div>
    </div>

    <body>


    </body>
    <script src="Javascript.js"></script>

</html>

CSS:

.nav {
  border: 1px black solid;
  background-image: url(Texture2.jpeg);
  width: 10%;
  height: 100%;
}
.links{
  display: inline;
  text-decoration: none;
}
.links a{
  text-decoration: none;
  display: inline;
  color: yellow;
}
.links a:hover{
  font-family: Impact;
}
.dp-contents{
  height: 0px;
  opacity: 0%;
  color: white;
}
.dp-show{
  color: purple;
  font-size: 20px;
}

JS:

var main = function(){
    $('.dp-click').click(function(){
        $('.dp-contents').toggle();
    });
}
$(document).ready(main);

Upvotes: 0

Views: 111

Answers (2)

Chalist
Chalist

Reputation: 3309

First set your div.nav inside body tag.

Secend you have some mistake in coding like:

<li style="margin: 5px; margin-left: 15px;"><a href="Index.html">Home</li>

Here you have to write </a> before </li>.

Or here:

</div class="lt">

This is wrong. Here you have to add </div> and Remove slash from top line.

Upvotes: 1

dippas
dippas

Reputation: 60563

make sure you link external library jQuery in this case since you are using jQuery.

From your code it seems you are not linking it.

Plus make sure all of your content is wrapped in your body tag.

Upvotes: 0

Related Questions