PDA

View Full Version : Resolved Can I insert/transform my current header into a dropdown menu?



PpSi
09-13-2011, 05:13 PM
I made a webpage, but unfortunately I didn't think it well enough before I started to work on the design.[more help required]

The problem is that I would prefer the body to be more visible from the moment the page loads, and right now, the top 300 pixels or so are taken by the header, logo and navigation bar.

I want to finish my project as soon as possible though, so I was wondering:Can I transform all the header, as it is now into a Dropdown Menu?

For instance:Instead of the 300px header,logo and navbar to have a 30 pixels, rectangle shaped button, with an arrow pointing down and the text "Click for menu" or smth.
On click, I would like all of my header to dropdown(let's say the rectangle shaped button has the same width as the current header) in a smooth dropdown animation, and at the same time, the page content to move down the page, to maintain the aspect.

I know it would not be easy, but I haven't found anything like this in my searches.

If this would be resolved with, say, javascript, I would like the current header&navbar to be loaded as they are now, possibly as a html page.I would hate to redo them :<

If this is the wrong place to ask this, or if I am asking too much, please forgive me, I am relatively new to this forum(I haven't done much posting, but I followed it for some time to learn things) and I am relatively new to javascript and other website-goodie-packs and currently do not know their limitations nor their full potential.

Thank you!

XManBG
09-13-2011, 06:52 PM
That's the right place :)

You have to put all of the header, logo, etc., which should represent your future menu stuff inside a single div. Let's give it an id="mymenu".
You have to create that new button and give it an id, e.g. id="mymenubutton".

Using jQuery you can animate that div to slide down slowly:


$("#mymenubutton").click(function(){
$("#mymenu").slideDown('slow');
});

Assure, that you'll give correct CSS of the new items, and the style of #mymenu initially contents display:hidden, just to give it a chance to perform the slide animation :).

Cheers

PpSi
09-13-2011, 07:10 PM
Thank you very much for you help and for your fast answer! I'll try to implement this as soon as I can!

Hope I won't have any trouble implementing this, I have some documentation to do on jQuery first. Nevertheless, I think I'll be fine from here^^

Thanks again,
Yours Gratefully, PpSi.


Later Edit:

Ok so, I tried to make this happen, but due my fairly limited understanting of how jQuery works, I was unable to finish the job.

I've done the first step(wrapping the main menu into a div), and gave my button an id.I also made the buttons that should trigger the dropdown.Here's with the basic design:

b)Represents the header&navbar, a) was basically just a spacer until now.

http://bit.ly/qEP9YU

That little bar would represent eventually a minimized version of the menu.When the "Expand menu" Button will be pressed, I'd like the header&navbar to descent from under that gray bar, and fit in it's place( as in, the orange area).When the other button will be pressed, I'd like the menu to go up again, in it's original position.The body of the site is represented by an iframe with the positioning set relative to the main page, in which different pages load.

This website is for my father , and on his homepage he has a flash presentation, that's why I need the extra space -.-

<td colspan="3"><a href="javascript:;" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('indexddown_v1','','images/index-ddown_v2.png',1);"><img name="indexddown_v1" src="images/index-ddown_v1.png" width="21" height="18" border="0" id="mymenubutton" alt="" /></a></td>

that's the code I have so far, currently the button has a simple mouseover change-image script.

My questions:
1)Where to insert the code that makes "b)" to dropdown, in the code above.
2)The positionig of the div containg the navbar&header, should be initially something like margin-top: -300px?So that it will be somewhere in the upper, not visible part of the page?
3)How do I set the point in which the script should put that div?

I'm Sorry for asking so many question, but the website is allmost done, and this is one of the last things I have to finish, that's why I'm so keen on making this work.

Thanks in Advance,
ppsi.

PpSi
09-15-2011, 05:22 AM
Bump! (Please)

XManBG
09-15-2011, 01:39 PM
Can you please give a link to the site so far... It will be easier to understand and to suggest a working solution.

Cheers

Minos
09-15-2011, 02:31 PM
XMan is right, without seeing the site there is limited help we can provide, but I will try and map out the thought process using jquery.

First, the jquery library must be included within the head tags, if you haven't already.



<script src="http://code.jquery.com/jquery-latest.js"></script>


Second, your header's style must have display:none. Since I don't know the names you are using, for the sake of the example they will be "header" and "mini".



<style type="text/css">
header{
display:none;
other css attributes...
}

mini{
css attributes...
}
</style>


Third, your HTML would become something along the lines of:



<td colspan="3">
<img id="header" src="./images/header.png" alt="hi im a header" />
<img id="mini" src="./images/mini.png" alt="hi im a mini" />
<script>
$('#mini').click(function() {
$('#header').slideDown('slow', function() {
// Animation complete.
});
});
</script>
</td>


Can't fully test it atm, but that is the basic jist.

PpSi
09-15-2011, 10:33 PM
http://ppsi.0fees.net/

There's the backbone of the website i'm working on.The only difference between this one and the original is the text on the buttons, the size of the iframe, and the content of the pages that are loaded into it.

Basically, on page load, I'd like to have just the blue bar + the body.The green bar+header(white zone) should come down only when pressing the arrow pointing down.

I want it to stay in the same position until the other button(the other arrow, the one pointing up is pressed)

The content of the page will contained in the iframe, index.htm will not load again unless the page will be refreshed.

I'll start playing with what you guys told me, and see how that goes:P

P.S. the basic prototype of the page was compiled by fireworks(thought it might help you reading the code). I also inserted two comments to highlight the part of the code that represents the blue bar.

azoomer
09-15-2011, 11:12 PM
Have you seen this script
http://www.dynamicdrive.com/dynamicindex17/dddropdownpanel.htm
It's not exactly what you ask for, but not too far from either.

Edit: Here is another example made with jquery (http://azoomer.com/show-panel.html)

the code:


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>paneltoggle</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style type="text/css">
#content{
width:615px;
height:auto;
margin-top:100px;
margin-left:auto;
margin-right:auto;
padding-right:15px;
}
#panelwrap{
width:655px;
height:auto;
margin-top:0;
margin-left:auto;
margin-right:auto;
}
#panel{
width:600px;
height:200px;
display:none;
margin-top:0;
float:left;
padding-bottom:20px;
background:#F4F4F4
}
#togglebutton {
cursor:pointer;
float:right;
font-size:11px;
left:50%;
margin-left:240px;
position:absolute;
text-align:left;
width:55px;
margin-top:-36px;
}
.hidepanel{
display:none;
}
</style>
<script type="text/javascript">
jQuery(document).ready(function($){
$('#togglebutton').click(function() {
$('#panel').slideToggle();
});

$('#togglebutton').click(function() {
if ($('.showpanel').is(':visible')) {
$('.showpanel').hide();
} else {
$('.showpanel').show();
}
});

$('#togglebutton').click(function() {
if ($('.hidepanel').is(':visible')) {
$('.hidepanel').hide();
} else {
$('.hidepanel').show();
}
});

$(function() {
$('#togglebutton').hover( function(){
$(this).css('color', '#F00');
},
function(){
$(this).css('color', '#000');
});
});
});
</script>
</head>
<body>
<div id="content">
<h2>Show and hide menu panel.</h2>
<div id="panelwrap">
<div id="togglebutton"><span class="showpanel">Show panel</span><span class="hidepanel">Hide panel</span>
</div><!--end #togglebutton-->
<div id="panel">
MENU PANEL
</div><!--end #panel-->
</div><!--end #panelwrap-->

<p>
Curabitur suscipit tincidunt leo, non vulputate tortor elementum vitae. In hac habitasse platea dictumst. Curabitur sagittis odio ut elit vehicula condimentum. Ut felis eros, ullamcorper eget semper vel, ullamcorper ac metus. Etiam viverra dictum urna, vitae commodo arcu tristique sollicitudin. Aliquam erat volutpat. Proin a mauris nec orci volutpat adipiscing. Sed lacinia, mauris quis feugiat ullamcorper, augue leo rutrum ante, vel ornare dolor odio ac ligula. Proin vehicula tristique consectetur. Nulla facilisi. Sed eleifend hendrerit metus, nec malesuada odio vehicula eu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Suspendisse ullamcorper leo sit amet ligula lobortis a rutrum ipsum feugiat. Vestibulum porttitor pretium arcu, ut imperdiet nulla venenatis accumsan. Aliquam erat volutpat. Fusce quis dolor ut elit pretium laoreet sit amet at elit. Proin nec magna augue, vulputate mattis massa. Nunc bibendum lacus id nisl facilisis porttitor. Quisque scelerisque aliquet accumsan. Nullam accumsan porta lacus vel pretium. Pellentesque diam massa, laoreet non lobortis at, viverra non est. Nunc turpis orci, malesuada vitae faucibus ut, eleifend eu lorem. Vivamus cursus tristique lectus, ac lacinia nibh pharetra in. Suspendisse mollis suscipit enim, sed ornare sem vulputate ac. Curabitur vitae quam enim.

Suspendisse molestie hendrerit dolor a auctor. Morbi viverra bibendum risus, ac aliquam arcu porttitor ut. Morbi ultrices porttitor mauris sed venenatis. Nulla facilisi. Nullam porta erat id leo ultricies adipiscing. Cras non lacus quam. Maecenas id mi eget eros suscipit mattis et tempor magna. Etiam sed massa neque. Quisque viverra molestie viverra. Nam viverra dolor risus. Sed id mi eros, quis venenatis lorem. Phasellus enim urna, aliquet in sodales vitae, pharetra non mauris. Pellentesque cursus porttitor dictum.

Quisque mattis cursus nibh id posuere. Morbi rhoncus justo at mauris fringilla vel volutpat quam pulvinar. In congue quam sollicitudin nunc mollis placerat. Phasellus augue erat, interdum non pharetra euismod, ultrices et ligula. Proin quam est, porta at ullamcorper sed, gravida non leo. Nam eros magna, sagittis a lacinia a, egestas vitae diam. Vivamus in orci at diam auctor euismod. Vestibulum eget ante non est blandit porta. Etiam odio quam, hendrerit non dictum vitae, mollis ac arcu. Nullam consectetur facilisis nibh ac mollis. Mauris iaculis consectetur venenatis. Aenean in massa magna, bibendum egestas metus. Nullam sapien felis, rhoncus sed venenatis in, tristique laoreet est.

Donec diam metus, gravida vitae fermentum in, condimentum ut ante. Nam tincidunt auctor pretium. Duis commodo lobortis ante, vel rhoncus nisl tempor vitae. Nam vehicula consectetur mauris, nec lacinia metus accumsan sagittis. Suspendisse potenti. Integer non dolor vitae ante hendrerit tempus. Duis ipsum nunc, sagittis eget euismod id, porttitor at purus. Ut quam lorem, placerat eget aliquet sagittis, dignissim eu magna. Nunc id sapien velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In ornare, lorem aliquet commodo dapibus, purus odio ultrices neque, vitae sagittis purus mauris non sem.
</p>
</div><!--end content-->
</body>
</html>

PpSi
09-16-2011, 01:53 PM
Le: Fixed the problem in the quote, I only have a small alinement issue now.please take a look

Thankz azoomer! The script works, the menu does indeed hide but the page does not slide down/up when the menu is revealed/hidden :<

It just stays at it's normal positon in chrome, and in firefox, the blue bar slides down when the menu is hidden

currently the structure is something like

the css:


<style type="text/css">
td img {display: block;}
.content{
width:1010px;
height:auto;
margin-top:0px;
margin-left:auto;
margin-right:auto;
padding-right:15px;
}
#panelwrap{
width:1000px;
height:auto;
margin-top:0;
margin-left:auto;
margin-right:auto;
}
#panel{
width:1000px;
height:230px;
display:none;
margin-top:0;
float:left;
padding-bottom:20px;
background:#F4F4F4
}
#togglebutton {
cursor:pointer;
float:right;
font-size:11px;
left:50%;
margin-left:240px;
position:absolute;
text-align:left;
width:55px;
margin-top:0px;
}
.hidepanel{
display:none;
}
#ifrm
{
height:800px;
width:1000px;
position:relative;
margin-left:auto;
margin-right:auto;
top: 10px;
}
the body:


<div class="content">
[--table representing the small menu(blue bar)---]
<div id="panelwrap">
<div id="togglebutton"><span class="showpanel">Show panel</span><span class="hidepanel">Hide panel</span>
</div><!--end #togglebutton-->
<div id="panel">
[----table representing the menu---]
</div><!--end panel-->
</div><!--panel wrap-->
<iframe id="ifrm" name="ifrm" src="home.htm" frameborder="1" >...</iframe>
</div><!--end content-->


[QUOTE=PpSi;261164]


Later Edit: Oh well, I found out were the problem was: Some unclosed <table> tags -.-

It works fine now, but I don't know why, The whole page is a bit to the left(or the blue bar is a bit to the right).Don't know why, but they won't center in the same place.

Notice that the "panelwrap" div is closed after the iframe.I don't know why, but if I close it before the iframe, the iframe would be also a bit deviated to the left of the main menu.

I've uploaded this version here: http://ppsi.0fees.net/index3.htm

Nevermind, I fixed that too! Thanks for the help guys, I really appreciate it! :)

Keep on the good work, best of wishes,

PpSi.