Login | Register | FAQ
Anonymous

How to do this

+ Post a reply

1, 2


How to do this

by amanpoke » Tue Jun 12, 2012 8:17 am

Can someone tell how to make "more" button like that on google homepage header. When clicks give some more links.
User avatar

amanpoke

  • Posts: 81
  • Joined: Sat Feb 04, 2012 3:20 pm
--
Join Linkbucks and get paid to share your links:
https://www.linkbucks.com/referral/527073

Re: How to do this

by XainPro » Tue Jun 12, 2012 10:00 am

These are called drop down menus or CSS menus some times
Here is a very good tutorial step by step to build a simple drop down menus
http://onwebdev.blogspot.com/2011/04/css-drop-down-menu-tutorial.html
here is the demo of this menu
http://dev.css-zibaldone.com/onwebdev/post/css-dropdown-menu-example.html
User avatar

XainPro

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

Re: How to do this

by amanpoke » Tue Jun 12, 2012 1:36 pm

I want the drop down to be on-click like google.
User avatar

amanpoke

  • Posts: 81
  • Joined: Sat Feb 04, 2012 3:20 pm
--
Join Linkbucks and get paid to share your links:
https://www.linkbucks.com/referral/527073

Re: How to do this

by XainPro » Wed Jun 13, 2012 5:23 am

its simple make a javascript function and call it on menu event
onclick="function_name()"

ok you can learn it from here
http://www.jankoatwarpspeed.com/post/20 ... query.aspx

the demo of this menu is at
http://www.jankoatwarpspeed.com/example ... Down.html#
User avatar

XainPro

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

Re: How to do this

by amanpoke » Wed Jun 13, 2012 9:03 am

Xain it was a great tutorial and made me learn something. But still I was not able to get what I want. So I am providing u with my header code. Please make the more button like that of google and give to sample links as well in the drop down that will open when someone clicks more.


Code: Select all

<html>
<head>
<title>Oaks</title>
</head>
<style type="text/css">
a:link {text-decoration: none; }
a:hover {text-decoration:underline;}
</style>
<body>
<table align="center" width="100%" cellspacing="1" cellpadding="1" border="0">
<tr>
<td align="left">
<a href="index.php">Home</a>&nbsp;&nbsp;
<a href="news"/>News</a>&nbsp;&nbsp;
<a href="video"/>Videos</a>&nbsp;&nbsp;
<a href="etc"/>ETC</a>&nbsp;&nbsp;
<a href="#"/>More</a>
</td>
<td align="right"><a href="login.php">Login</a>&nbsp;&nbsp;
<a href="register.php">Signup</a></td>
</tr>
</table>
<hr/>
User avatar

amanpoke

  • Posts: 81
  • Joined: Sat Feb 04, 2012 3:20 pm
--
Join Linkbucks and get paid to share your links:
https://www.linkbucks.com/referral/527073

Re: How to do this

by XainPro » Thu Jun 14, 2012 7:53 am

ok i have created the google like menus for you check it out

Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Reinventing drop down with CSS and jQuery - demo</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
* {
   padding:0;
   margin:0;
}
body {
   font-family:Arial, Helvetica, Sans-Serif;
   font-size:0.75em;
}
#theGoogleLikeMenus {
   background-color:#000;
   height:42px;
   width:100%;
   position:relative;
}
#theGoogleLikeMenus ul li { display:inline; }
.dropdownMnu a, .dropdown a:visited {
   color:#FFF;
   text-decoration:none;
   outline:none;
}

.dropdownMnu a span {
   cursor:pointer;
   padding:5px;
}

.submenus {
   background:#000 none repeat scroll 0 0;
   border:1px solid #CCCCCC;
   color:#000000;
display:none;
   padding:5px 0px;
   position:relative;
   width:175px;
   list-style:none;
   color:#000000;
   left:205px;
   top:4px;
   background-color: #CCCCCC;
}
.dropdownMnu  ul li a {
color:#000000;
   padding:5px;
   display:block;
}
    </style>
<script type="text/javascript">
        $(document).ready(function() {
               $(".drop").toggle(function() {
  $(".submenus").show(2000)
}, function() {
$(".submenus").hide(2000)
});
          
                  
            $(document).bind('click', function(e) {
                var $clicked = $(e.target);
                if (! $clicked.parents().hasClass("drop"))
                    $(".submenus").hide(2000);
            });

        });
    </script>
    </head>
    <body>
    <div id="theGoogleLikeMenus">
      <ul id="sample" class="dropdownMnu">
        <li><a href="#"><span>Page 1 </span></a></li>
       <li><a href="#"><span>Page 2 </span></a></li>
       <li><a href="#"><span>Page 3 </span></a></li>
       <li><a href="#"><span>Page 4 </span></a></li>
        <li class="drop"><a class="dropaero" href="#"><span>More (V)</span></a>
          <ul class="submenus">
            <li><a href="#">Product 1</a></li>
            <li><a href="#">Product 2</a></li>
            <li><a href="#">Product 3</a></li>
            <li><a href="#">Product 4</a></li>
          </ul>
      </li>
     
      </ul>
    </div>
</body>
</html>
User avatar

XainPro

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

Re: How to do this

by amanpoke » Thu Jun 14, 2012 1:27 pm

I just copied the javascript in one file and made some changes in the code but the links didn't worked. Also I was just willing for the code of the more button along with dropdown and I didn't wanted the black background.

Also please do one more favour to me if possible edit the code I provided. plz...
User avatar

amanpoke

  • Posts: 81
  • Joined: Sat Feb 04, 2012 3:20 pm
--
Join Linkbucks and get paid to share your links:
https://www.linkbucks.com/referral/527073

Re: How to do this

by amanpoke » Fri Jun 15, 2012 12:13 pm

I used the following code for my page:
Code: Select all

<html><head><title>Oaks</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript" src="js/jquery-1.6.2.min.js"></script><script type="text/javascript" src="js/top_menu.js"></script><link href="css/google_top_menu.css" rel="stylesheet" type="text/css"/>

</head>

<body>

<div id="header">

<div class="mainbar" >

<div style="float:left;">

<ul class="mainMenu" >

<li class="current">

<a href="http://www.oaks.asia/">Web</a>

</li>

<li class="">

<a href="http://oakspedia.com">Pedia</a>

</li><li class="">

<a href="http://oakstree.com">Oakstree</a>

</li><li class="">      <a href="http://www.news.oaks.asia">News</a>

</li>

<li class="">

<a href="http://oaks.asia/video">Videos</a>

</li>

<li class="">

<a href="http://oaks.asia/etc">ETC</a>

</li>

<li>

<li style="border-right:0;">

<dl class="staticMenu">

<dt>

<a class="" href="settings" onClick="return false;">More<span class="arrow"></span></a>

</dt>

<dd>

<ul class="mainMenuSub" style="right: -1px; left: auto; display: none;">                 <li>

<a href="http://www.oaks.asia/educator">Educator</a>

</li>

<li>

<a href="http://dictionary.oaks.asia">Dictionary</a>

</li>

<li><a href="http://play.oaks.asia">Play</a></li>   <li>

<div class="mid-line">

</div>

</li>

<li>

<a href="http://sites.oaks.asia">Sites</a>

</li>

<li>

<a href="http://oaks.asia/solutions">Solutions</a>

</li>

<li>

<li><div class="mid-line"></div></li>

<li>

<a href="">even more >></a>

</li>

<li>

<div class="mid-line">

</div>

</li>

</ul>

</dd>

</dl>

<li class="">

<table align="center" width="100%" cellspacing="1" cellpadding="1" border="0">

<tr>

<td align="right"><a href="login.php">Login</a>&nbsp;&nbsp;

<a href="register.php">Signup</a></td>

</tr>

</table>

</li>

</li>

</ul>

</div>

</div>

<br>

<br>

<br><br><br><br><br>

<center><img src="http://oaks.asia/oaks.png">

<br><br><br>

<table cellpadding="5" cellspacing="1" class="searchBox">

<tr>

   <td align="center">



   <form action="search/index.php" method="get">



<table><tr><td>

   <div align="left">

<input type="text" name="query" id="query" size="40" value="" action="search/include/js_suggest/suggest.php" columns="2" autocomplete="off" delay="1500">   

</div>

<td>

<input type="submit" value="Search">

</td></tr></table>

<input type="hidden" name="search" value="1">

</form>

</td>

</tr>

</table>

</center>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<hr/>

<table align="center" width="100%" cellspacing="1" cellpadding="1" border="0">

<tr>

<td align="left"><small>Copyright &copy; 2012</small>

</td><td align="right">

<a href="guestbook"/><small>Guestbook</small></a>&nbsp;

<a href="AnnounceMailFree/index.php"/><small>Subscribe to newsletter</small></a>&nbsp;

<a href="ReferUsNow/referusnow.php"/><small>Share</small></a>&nbsp;

<a href="contact_us.php"><small>Contact Us</small></a>&nbsp;

<a href="helpdesk/index.php"/><small>Help</small></a>

</td>

</tr>

</table>

</body>

</html>



This for the css:
Code: Select all
   @charset "utf-8";
   /* CSS Document */
   *{
      margin:0;
      padding:0;
   }
html{overflow-y:scroll;margin: 0px 0px 0px 0px;padding: 0px 0px 0px 0px;background-color:;color:#808080;}
body{font-size: 11px;font-family:"lucida grande",tahoma,verdana,arial,sans-serif;color:#333;line-height:1.28;margin:0;padding:0;text-align:left;direction:ltr;unicode-bidi:embed}
hr
   {
   color: #e9e9e9;
background-color: #e9e9e9;
   }

   div.mainbar{
      top:0;
      z-index: 999;
      padding:0px 10px;
      position:fixed;
      width:100%;
      background:#2D2D2D;
      height:30px;
      
   }

   ul.mainMenu{
      list-style:none;

   }

   ul.mainMenu li{
      float:left;
      /*border-right:1px solid #bcb6aa;*/
      padding:0px;
   }
.arrow{
border-color:#C0C0C0 transparent white;
border-style:solid dashed dashed;
margin-left:5px;
position:relative;
top:10px;
}
/*Styling for the link of the current page*/
.current a{
background-color:#2D2D2D;
border-top:2px solid #DD4B39;/*red ribbon at top*/
border-bottom:0;
display:block;

padding:0 8px 0 8px;
position:relative;
z-index:1;
color:#FFFFFF;
font-weight:bold;
}
   .mainMenu li a{
text-decoration:none;
padding:6px 8px 7px;
color:#CCCCCC;
outline:none;
display:block;
   }
.mainMenu a:hover{
background-color:#676767;
color:#CCCCCC;
}
/*
   .mainMenu li a:hover{
      background:white;
      text-decoration:none;
   }
*/
   .staticMenu dl{ }
   .staticMenu dd { position:relative; }

   /* DT styles for sliding doors */
   .staticMenu dt a {
      padding:5px 4px 5px 4px;
      margin-bottom:1px;
      display:block;
      font-weight:bold;
      color:#fff;
      line-height:15px;
      text-decoration:none;
   }

   .staticMenu dt a.selected{
      background:white;
      position:relative;
      z-index:99;
      padding-bottom:6px;
      color:#3366cc;
   }

   /* UL styles */
   .staticMenu dd ul {
      display:none;
       list-style:none;
      position:absolute;
       cursor:pointer;
   }

   ul.mainMenuSub{
      position:absolute;
      top:-2px;
      left:-1px;
      padding:2px;
      border:1px solid #b4a291;
      background: white;
   }

   ul.mainMenuSub li{
      border:0;
      width:123px;
   }

   ul.mainMenuSub li.seperator{
      width:223px;
      height:2px;
      display:block;
      background:url(/images/mainmenusep.png) repeat-x;
      margin-bottom:6px;
      margin-top:4px;
      overflow:visible;
   }

   ul.mainMenuSub li a:link{
      display:block;
      font-weight:bold;
      text-align:left;
      overflow:hidden;
      padding:2px 4px 3px 19px;
      color:#3366cc;;
      text-decoration:none;
   }
   .mid-line{
background-color:#FFF;
border-top:1px solid #e5e5e5;
font-size:0;
}
/*
   ul.mainMenuSub li a:hover{
      background:#444444;
      color:white;
      text-decoration:none;
   }
*/
   ul.mainMenuSub li a img{

      border:0;
   }

   ul.mainMenuSmall li{
      width:173px;
   }

   div.mainMenuSubTwo{
      display:none;
      left:220px;
      position:absolute;
      top:3px;
      z-index:99;
      background:white;
   }

   div.mainMenuSubTwo ul{
      border:1px solid #b4a291;
      padding:2px;
      background:white;
   }

   a.MainSubExpandable{
      background:white url(/images/mainmenuexpandable.png) no-repeat right top;

   }
/*
   ul.mainMenuSub li a.MainSubExpandable:hover{
      background:#444444 url(/images/mainmenuexpandable.png) no-repeat;
      background-position:right -20px;
   }
   */
a:link {text-decoration: none; color: #888888;}
a:hover {text-decoration:underline;}



Now i wanted the login and signup button where i wrote it on the image.
Can someone tell me what change I should do in order to show login and signup button where I wanted in place of the place where it is shown.

Attachments

  1. page.PNG (51.45 KiB) Downloaded 708 times
    This image shows what change I want to do

User avatar

amanpoke

  • Posts: 81
  • Joined: Sat Feb 04, 2012 3:20 pm
--
Join Linkbucks and get paid to share your links:
https://www.linkbucks.com/referral/527073

Re: How to do this

by XainPro » Sat Jun 16, 2012 4:35 am

that's what i have created and shared did you checked it ?
User avatar

XainPro

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

Re: How to do this

by amanpoke » Sat Jun 16, 2012 6:30 am

but tell me how should I put my login and signup button on the top right corner as i showed u. It not coming in a line on the top.
User avatar

amanpoke

  • Posts: 81
  • Joined: Sat Feb 04, 2012 3:20 pm
--
Join Linkbucks and get paid to share your links:
https://www.linkbucks.com/referral/527073


+ Post a reply

1, 2