4 Replies - 20842 Views - Last Post: 28 August 2009 - 09:46 AM

#1 unknown25  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 23-December 08

Menu in bottom bar

Posted 23 August 2009 - 07:03 AM

hello,
i have created a bottom bar like facebook's. I want to have some menus on that bar so when i click they will drop up and have some text inside (code). i don't know how to do that and i don't know how to have image and text in the same line (when i have an image and then a text the text goes down). Please help me

<style type="text/css">
#bottom {
width: 95%;
position: fixed;
bottom: 30px;
background: #EEEEEE;
color: #cc0000;
border-top: 2px solid #666666;
border-left: 3px solid #666666;
border-right: 2px solid #666666;
-moz-border-radius-topleft: 7px;
-moz-border-radius-topright: 7px;
margin-bottom:-30px;
}

</style>
<div id="bottom"> <a href="ht tp:// mysite . ws"><img src="ht tp:// mysite . ws/navbar.png" border="0"></a> Under Heavy Construction!

</div>



Is This A Good Question/Topic? 0
  • +

Replies To: Menu in bottom bar

#2 markhazlett9  Icon User is offline

  • Coding is a lifestyle
  • member icon

Reputation: 60
  • View blog
  • Posts: 1,666
  • Joined: 12-July 08

Re: Menu in bottom bar

Posted 23 August 2009 - 08:09 PM

If you ever want something to appear over something else use absolute positioning to 0,0. Then put that inside another div to position it on the page.

Hope this helps.

Cheers
Was This Post Helpful? 0
  • +
  • -

#3 gregwhitworth  Icon User is offline

  • Tired.
  • member icon

Reputation: 219
  • View blog
  • Posts: 1,604
  • Joined: 20-January 09

Re: Menu in bottom bar

Posted 23 August 2009 - 09:47 PM

Well you decided to tackle a decenlty difficult task. Not impossible but from the sounds of it you sound quite new to CSS and HTML.

Well you want to use absolute position as mark has stated, but you need to look into a sticky menu or bar solution using Javascript. To make it so that your menu stays at the bottom of the screen. For instance, if you did lets say the following:

#bottomMenu {
	  position: absolute;
	  bottom: 0;
}



That would put it on the bottom of the screen, but only when it is initially loaded, if you scroll down then your bar will stay where it was initially, not moving with the content.

Next - onto putting images next to your text - you want to use float. For example:

#bottomMenu img.fun {
	 float: left;
	 margin: 5px 5px;
}



HTML
<div id="bottomMenu">
	  <img src="yourimage.jpg" class="fun"/>
</div>


Was This Post Helpful? 1

#4 unknown25  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 23-December 08

Re: Menu in bottom bar

Posted 28 August 2009 - 08:33 AM

i ask for menu. I want to have some text or images on the bar and when somebody clicks on them, a menu will open where i will have some things
Was This Post Helpful? 0
  • +
  • -

#5 przemass  Icon User is offline

  • D.I.C Head

Reputation: 30
  • View blog
  • Posts: 166
  • Joined: 18-July 09

Re: Menu in bottom bar

Posted 28 August 2009 - 09:46 AM

First create menu in HTML CSS, then set menu style display:none to make menu invisible. Add onclick action on element where you want to show your menu after click on it. In javascript action calculate menu position, set menu position and display it.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1