Xenforo Login

  • Hello Guest! Welcome to ConsoleCrunch, to help support our site check out the premium upgrades HERE! to get exclusive access to our hidden content.
  • Unable to load portions of the website...
    If you use an ad blocker addon, you should disable it because it interferes with several elements of the site and blocks more than just adverts.
  • Read Rules Before Posting Post Virus Scans with every program.

Psycho_Coder

Active Poster
Retired Staff
Active Member
Apr 12, 2014
642
481
133
UK
I got bored wondering how they make the menu drop down down with the login button which makes the Login form apear.

Here is a basic one I created. hardly no style so looks not so good but it works great with a nice drop down effect.

e48dccd1b5569a0ade4c47beb4819f02.gif


Code:
<!DOCTYPE html>
<html>
<title>Social Look</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="CSS/style.css">
<script type="text/javascript">
$(document).ready(function(){
    $("#panel").click(function(){
    $("#dropdown").slideDown("slow");
    });
});
</script>
<style>
#panel {
    background-color: lightblue;
    height: 50px;
    text-align: center;
    width: 500px;
    margin-left: 200px;
}
#dropdown {
    margin-left: 200px;
    background-color: #ccc;
    height: 200px;
    width: 500px;
    text-align: center;
    display: none;
}

</style>
<body>

<div id="panel">Click Here to drop down</div>
<div id="dropdown">

</div>
</body>
</html>
 
  • Like
Reactions: UnboundGodz
I got bored wondering how they make the menu drop down down with the login button which makes the Login form apear.

Here is a basic one I created. hardly no style so looks not so good but it works great with a nice drop down effect.

e48dccd1b5569a0ade4c47beb4819f02.gif


Code:
<!DOCTYPE html>
<html>
<title>Social Look</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="CSS/style.css">
<script type="text/javascript">
$(document).ready(function(){
    $("#panel").click(function(){
    $("#dropdown").slideDown("slow");
    });
});
</script>
<style>
#panel {
    background-color: lightblue;
    height: 50px;
    text-align: center;
    width: 500px;
    margin-left: 200px;
}
#dropdown {
    margin-left: 200px;
    background-color: #ccc;
    height: 200px;
    width: 500px;
    text-align: center;
    display: none;
}

</style>
<body>

<div id="panel">Click Here to drop down</div>
<div id="dropdown">

</div>
</body>
</html>
Great job m8
 
General chit-chat
Help Users
  • @ lurch6661:
    hows it going man
  • @ QM|T_JinX:
    im good you
  • @ lurch6661:
    good as it gets lol
  • @ lurch6661:
    spending alot of time with gf its her time of the month
  • @ lurch6661:
    and she outta smokes
  • @ QM|T_JinX:
    hahahha
  • @ lurch6661:
    ahhhhh oooo
  • @ lurch6661:
    ol
  • @ QM|T_JinX:
    it is what it is bro
  • @ lurch6661:
    famous saying from a wise one
  • @ lurch6661:
    lol
  • @ QM|T_JinX:
    lol
  • Chat Bot:
    xoilaccouk7 is our newest member. Welcome!
  • Chat Bot:
    Christo has joined the room.
  • Chat Bot:
    QM|T_JinX has joined the room.
  • Chat Bot:
    ExcelUK is our newest member. Welcome!
  • Chat Bot:
    Reza684 is our newest member. Welcome!
  • @ lurch6661:
    zap
  • Chat Bot:
    xoilacad6 is our newest member. Welcome!
      Chat Bot: xoilacad6 is our newest member. Welcome!