Login | Register | FAQ
Anonymous

Sliding Menu Troubles

+ Post a reply

9 posts Page 1 of 1


Sliding Menu Troubles

by soccerwebsitemaker » Fri May 11, 2012 12:51 am

I'm having some troubles with creating a sliding menu.







JS CODE:
Code: Select all
//When mouse rolls over 
    $("#li1").mouseover(function(){ 
        $(this).stop().animate({height:'100px'},{queue:false, duration:600, easing: 'easeOutCubic'}) 
    }); 
$("#li2").mouseover(function(){ 
        $(this).stop().animate({height:'200px'},{queue:false, duration:600, easing: 'easeOutCubic'}) 
    }); 
$("#li3").mouseover(function(){ 
        $(this).stop().animate({height:'150px'},{queue:false, duration:600, easing: 'easeOutCubic'}) 
    }); 
$("#li4").mouseover(function(){ 
        $(this).stop().animate({height:'200px'},{queue:false, duration:600, easing: 'easeOutCubic'}) 
    });   
 
    //When mouse is removed 
    $("li").mouseout(function(){ 
        $(this).stop().animate({height:'60px'},{queue:false, duration:600, easing: 'easeOutCubic'}) 
    }); 

});







HTML CODE:
Code: Select all
<!DOCTYPE html>

<html>

<head>

<title>Pentagram Productions Official Website</title>

<link rel="stylesheet" href="stuff/home.css" />

<script src="stuff/home.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script src="stuff/JQueryEase.js"></script>

<script src="stuff/home.js"></script>

</head>

<body onload="draw();" style="background: #121212;">

<section id="topnavigationbar">

<ul> 
<li id="li1" class="green"> 
<p><a href="Pentagram Productions.php">Home</a></p> 
<a href="Pentagram Productions.php"><div class="subtext">Home</div></a>
</li> 
<li id="li2" class="yellow"> 
<p><a href="stuff/whatisthis.php">Games</a></p> 
<a href="stuff/whatisthis.php"><div class="subtext">What is this?</div></a>
<a href="stuff/moreinfo.php"><div class="subtext">More Info</div></a>
<a href="stuff/tipsandtricks.php"><div class="subtext">Tips and Tricks</div></a>
</li> 
<li id="li3" class="red"> 
<p><a href="stuff/earncoins.php">News</a></p> 
<a href="stuff/earncoins.php"><div class="subtext">Earn Coins</div></a>
<a href="stuff/achievements.php"><div class="subtext">Achievements</div></a>
</li> 
<li id="li4" class="blue"> 
<p><a href="stuff/chooseawards.php">Credits</a></p> 
<a href="stuff/chooseawards.php"><div class="subtext">Choose Awards</div></a>
<a href="stuff/wishlist.php"><div class="subtext">Wish List</div></a>
<a href"stuff/buyinghistory.php"><div class="subtext">Buying History</div></a>
</li> 
</ul>

<p id="alp">Admin Login:</p>

<form id="adminlogin" method="post" action="stuff/login.php">

<label for"username" id="usernamel">Username</label><input type="text" id="username" name="alusername" />

<label for"password" id="passwordl">Password</label><input type="password" id="password" name="alpassword" />

<input type="submit" value="Login" id="submit" />

</form>

</section>

<h1 id="pph">Welcome to Pentagram Productions</h1>

<p id="content-1">A new company run by 3 devoted workers. We are creating games for you to play - made with HTML5 canvas. Our first game ever will be
ready soon, called Virus Tower Defense - it includes real viruses, computers, and operating systems. Check back frequently for new updates!</p>

<div class="redbox">

<h3>Look here for messages from each admin!</h3>

<div id="jacksonmess">

<ul id="jacksonmesslist">

<li id="jacksonmesslistli">Welcome! If you'd like to become an admin, talk to Jackson</li>

</ul>

</div>

<div id="austinmess">

<ul id="austinmesslist">

<li id="austinmesslistli">Welcome! If you have suggestions or improvements for the site, talk to Austin</li>

</ul>

</div>

<div id="alexmess">

<ul id="alexmesslist">

<li id="alexmesslistli">Welcome! If you have ideas for games, or other needs related to PentagramProductions, talk to Alex.</li>

</ul>

</div>

</div>

<div class="bluebox">

<h3>Dev Messages</h3>

<p id="devmessages">Welcome to our site! - From - Cinnamontroll, Jaxtonian, and ZingZing45</p>

</div>

<div class="greenbox">

<h3>News, Bulletins, Important Info</h3>

<ul id="newslist">

<li id="newslistli">May 1, 2012 - Pentagram Productions officially started</li>

<li id="newslistli">May 8, 2012 - Site Version 1.1 released</li>

<li id="newslistli">May 9, 2012 - Site Version 1.2 released</li>

</ul>

</div>

</body>

</html>      







Please help me find errors inside my code.


Also, website where this code is http://www.pentagramproductions.uphero.com

Thank you
User avatar

soccerwebsitemaker

  • Posts: 139
  • Joined: Sat Dec 31, 2011 6:25 pm
--
Coins. Profile. Games. Chat. Fun.

CoinAwards.

Check it out at http://www.coinawards.net63.net/

Re: Sliding Menu Troubles

by soccerwebsitemaker » Sun May 13, 2012 2:55 pm

Are the images closed correctly? Not >, its /> (I think) also its one tag
User avatar

soccerwebsitemaker

  • Posts: 139
  • Joined: Sat Dec 31, 2011 6:25 pm
--
Coins. Profile. Games. Chat. Fun.

CoinAwards.

Check it out at http://www.coinawards.net63.net/

Re: Sliding Menu Troubles

by XainPro » Mon May 14, 2012 6:01 am

on my screen i see it like this ....

Attachments

  1. untitled.JPG (64.11 KiB) Downloaded 1163 times

User avatar

XainPro

  • Posts: 3662
  • Joined: Fri Feb 17, 2012 8:10 pm

Re: Sliding Menu Troubles

by soccerwebsitemaker » Mon May 14, 2012 9:42 am

The white text on the left is the non-styled drop down list (Parent Elements are indented one space, inner elements are not indented.
User avatar

soccerwebsitemaker

  • Posts: 139
  • Joined: Sat Dec 31, 2011 6:25 pm
--
Coins. Profile. Games. Chat. Fun.

CoinAwards.

Check it out at http://www.coinawards.net63.net/

Re: Sliding Menu Troubles

by XainPro » Mon May 14, 2012 4:44 pm

well i am trying to understand what's wrong with it but it's too complicated lolz let me examine it ..
User avatar

XainPro

  • Posts: 3662
  • Joined: Fri Feb 17, 2012 8:10 pm

Re: Sliding Menu Troubles

by soccerwebsitemaker » Mon May 14, 2012 10:44 pm

Ok, thank you for examining it - See what you can find
User avatar

soccerwebsitemaker

  • Posts: 139
  • Joined: Sat Dec 31, 2011 6:25 pm
--
Coins. Profile. Games. Chat. Fun.

CoinAwards.

Check it out at http://www.coinawards.net63.net/

Re: Sliding Menu Troubles

by XainPro » Tue May 15, 2012 4:15 am

sorry what i have done so far is this
Code: Select all
<!DOCTYPE html>

<html>
<head>
<title>Pentagram Productions Official Website</title>
<style type="text/css">
/*li{ 
    width:125px; 
    height:60px; 
    float:left; 
    color:#191919; 
    text-align:center; 
    overflow:hidden; 
}  */

#topnavbarul {
   margin:0;
   padding:0;
}
#pph {
   text-align: center;
   color: #99FF00;
}
#content-1 {
   text-align: center;
   color: #99FF00;
}
img {
   position: absolute;
   top: 0px;
   left: 900px;
}
#canvas {
   border: groove;
   border-color: blue;
   border-width: 3px;
   position: absolute;
   top: 250px;
   left: 300px;
}
#topnavigationbar {
   border: solid;
   border-color: #121212;
   border-width: 2px;
   height: 50px;
   background: #808080;
   z-index: 2;
}
#topnavigationbar ul {
   list-style:none;
   display:inline;
}
#topnavigationbar ul {
   display:inline;
   float:left;
}
.homeli {
   width:80px;
   height:25px;
   float:left;
   color:#99FF00;
   background: #8B2500;
   border-radius: 20px;
   text-align:center;
   overflow:hidden;
   padding-top: 20px;
   position: relative;
   bottom: 0px;
   left: 10px;
   float:left;
   z-index: 2;
}
.gamesli {
   width:80px;
   height:25px;
   float:left;
   color:#99FF00;
   background: #8B2500;
   border-radius: 20px;
   text-align:center;
   overflow:hidden;
   padding-top: 20px;
   position: relative;
   bottom: 0px;
   left: 80px;
}
.newsli {
   width:80px;
   height:25px;
   float:left;
   color:#99FF00;
   background: #8B2500;
   border-radius: 20px;
   text-align:center;
   overflow:hidden;
   padding-top: 20px;
   position: relative;
   bottom: 00px;
   left: 150px;
}
.creditsli {
   width:80px;
   height:25px;
   float:left;
   color:#99FF00;
   background: #8B2500;
   border-radius: 20px;
   text-align:center;
   overflow:hidden;
   padding-top: 20px;
   position: relative;
   bottom: 00px;
   left: 220px;
}
#alp {
   position: absolute;
   left: 400px;
}
#usernamel {
   position: absolute;
   left: 500px;
}
#username {
   position: absolute;
   left: 575px;
}
#passwordl {
   position: absolute;
   left: 750px;
}
#password {
   position: absolute;
   left: 825px;
}
#submit {
   position: absolute;
   left: 1025px;
   top: 20px;
   background: #CC0033;
   border: solid;
   border-color: black;
   border-width: 1px;
   height: 30px;
   width: 50px;
   color: #336633;
}
h3 {
   text-align: center;
}
.redbox {
   background: #990000;
   color: white;
   border-radius: 14px;
   opacity: 0.5;
   width: 500px;
   height: 400px;
   position: absolute;
   left: 60px;
   top: 200px;
}
.redbox:hover {
   opacity: 1.0;
   border: groove;
   border-color: yellow;
   border-width: 2px;
}
.bluebox {
   background: #3333FF;
   color: white;
   border-radius: 14px;
   opacity: 0.5;
   width: 500px;
   height: 190px;
   position: absolute;
   right: 60px;
   top: 200px;
}
.bluebox:hover {
   opacity: 1.0;
   border: groove;
   border-color: yellow;
   border-width: 2px;
}
.greenbox {
   background: #99FF66;
   color: white;
   border-radius: 14px;
   opacity: 0.5;
   width: 500px;
   height: 190px;
   position: absolute;
   right: 60px;
   top: 410px;
}
.greenbox:hover {
   opacity: 1.0;
   border: groove;
   border-color: yellow;
   border-width: 2px;
}
#austinmesslistli {
   text-align: center;
}
#jacksonmesslistli {
   text-align: center;
}
#alexmesslistli {
   text-align: center;
}
#devmessages {
   text-align: center;
}
ul {
   margin:0;
   padding:0;
}
a {
   color:#FFF;
   text-decoration:none;
}
p {
   padding:0px 5px;
   padding-top: 5px;
}
.subtext {
   padding-top:15px;
   padding-bottom:15px;
   color:#FFF;
   text-shadow: #330099 5px 5px 5px;
}
.subtext:hover {
   background-color: #000033;
}
</style>
<script src="stuff/home.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="stuff/JQueryEase.js"></script>
<script src="stuff/home.js"></script>
</head>

<body onload="draw();" style="background: #121212;">
<div id="topnavigationbar">
  <ul>
    <li id="li1" class="green"> <a href="Pentagram Productions.php">
      <div class="subtext">Home</div>
      </a> </li>
    <li class="yellow"> <a href="stuff/whatisthis.php">Games</a>
      <ul>
        <li><a href="stuff/whatisthis.php">
          <div class="subtext">What is this?</div>
          </a></li>
        <li><a href="stuff/moreinfo.php">More Info</a></li>
        <li><a href="stuff/tipsandtricks.php">Tips and Tricks</a></li>
      </ul>
    </li>
    <li id="li3" class="red"> <a href="stuff/earncoins.php">News</a>
      <ul>
        <li><a href="stuff/earncoins.php">
          <div class="subtext">Earn Coins</div>
          </a></li>
        <li><a href="stuff/achievements.php">
          <div class="subtext">Achievements</div>
          </a></li>
      </ul>
    </li>
    <li class="blue">
      <p><a href="stuff/chooseawards.php">Credits</a></p>
      <ul>
        <li><a href="stuff/chooseawards.php">
          <div class="subtext">Choose Awards</div>
          </a></li>
        <li><a href="stuff/wishlist.php">
          <div class="subtext">Wish List</div>
          </a></li>
        <li><a href"stuff/buyinghistory.php">
          <div class="subtext">Buying History</div>
          </a></li>
      </ul>
    </li>
  </ul>
  <p id="alp">Admin Login:</p>
  <form id="adminlogin" method="post" action="stuff/login.php">
    <label for"username" id="usernamel">Username</label>
    <input type="text" id="username" name="alusername" />
    <label for"password" id="passwordl">Password</label>
    <input type="password" id="password" name="alpassword" />
    <input type="submit" value="Login" id="submit" />
  </form>
</div>
<h1 id="pph">Welcome to Pentagram Productions</h1>
<p id="content-1">A new company run by 3 devoted workers. We are creating games for you to play - made with HTML5 canvas. Our first game ever will be
  ready soon, called Virus Tower Defense - it includes real viruses, computers, and operating systems. Check back frequently for new updates!</p>
<div class="redbox">
  <h3>Look here for messages from each admin!</h3>
  <div id="jacksonmess">
    <ul id="jacksonmesslist">
      <li id="jacksonmesslistli">Welcome! If you'd like to become an admin, talk to Jaxtonian</li>
    </ul>
  </div>
  <div id="austinmess">
    <ul id="austinmesslist">
      <li id="austinmesslistli">Welcome! If you have suggestions or improvements for the site, talk to ZingZing45</li>
    </ul>
  </div>
  <div id="alexmess">
    <ul id="alexmesslist">
      <li id="alexmesslistli">Welcome! If you have ideas for games, or other needs related to PentagramProductions, talk to CinnamonTroll.</li>
    </ul>
  </div>
</div>
<div class="bluebox">
  <h3>Dev Messages</h3>
  <p id="devmessages">Welcome to our site! - From - Cinnamontroll, Jaxtonian, and ZingZing45</p>
</div>
<div class="greenbox">
  <h3>News, Bulletins, Important Info</h3>
  <ul id="newslist">
    <li id="newslistli">May 1, 2012 - Pentagram Productions officially started</li>
    <li id="newslistli">May 8, 2012 - Site Version 1.1 released</li>
    <li id="newslistli">May 9, 2012 - Site Version 1.2 released</li>
  </ul>
</div>
</body>
</html>


but i think you have copied the parts of code from lots of websites to create 1.You should 1st draw on paper or photoshop that what is your requirement or what kind of layout you exactly want draw a wireframe

Attachments

  1. layout.JPG (20.62 KiB) Downloaded 1045 times

User avatar

XainPro

  • Posts: 3662
  • Joined: Fri Feb 17, 2012 8:10 pm

Re: Sliding Menu Troubles

by soccerwebsitemaker » Tue May 15, 2012 9:14 pm

The layout is only messed up because the JQuery menus are not working. It looks better without the messed up sliding menus.

Have you found any way to fix the actual sliding menu?
User avatar

soccerwebsitemaker

  • Posts: 139
  • Joined: Sat Dec 31, 2011 6:25 pm
--
Coins. Profile. Games. Chat. Fun.

CoinAwards.

Check it out at http://www.coinawards.net63.net/

Re: Sliding Menu Troubles

by XainPro » Wed May 16, 2012 5:24 am

unfortunately i did not find any fix for menus but it is some how iretating because it's so messed up and it have lots of elements which are html 5 and lots of mixed and depreciated elements :(
User avatar

XainPro

  • Posts: 3662
  • Joined: Fri Feb 17, 2012 8:10 pm


+ Post a reply

Page 1 of 1