Jump to content

Menu "flutuante"


green angel
 Share

Recommended Posts

Boas

Para um projecto escolar criei um site que tem um menu e esse menu acompanha a barra do scroll. Fiz isso com CSS.

position:fixed;

Agora deparei-me com um problema. Por acaso ao ver um site num netbook, como o ecrã tem umas dimensões mais reduzidas, não se conseguia ver o menu todo.

Por isso queria desenvolver um script em javascript para que o menu ficasse encostado à parte superior do browser quando o banner não está à vista.

http://img89.imageshack.us/img89/2171/img1s.jpg

Como mostro na imagem eu queria que o menu da esquerda ficasse encostado à linha vermelha quando não se vê o banner. Se o banner estiver à vista o menu não sairia da mesma posição.

Agradeço que me dêem umas dicas,

Link to comment
Share on other sites

O mais simples é usar posicionamento absoluto em CSS e calcular as dimensões do ecrã para que quando exista scroll ou alteração das dimensões do ecrã, o menu se mova.

Pois. Eu há uns tempos estive a explorar trabalhar com as dimensões do ecrã e encontrei alguns problemas visto que cada browser tem diferentes maneiras de "chamar" as dimensões do ecrã certo ?

Como é que eu posso fazer a distinção entre os browsers através de Javascript ?

Link to comment
Share on other sites

Por acaso não tens conhecimento de algum tutorial simples para iniciantes ?

No próprio site do jQuery tem guias e links para tutoriais.

"Para desenhar um website, não tenho que saber distinguir server-side de client-side" - um membro do fórum que se auto-intitula webdesigner. Temo pelo futuro da web.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.