Jump to content
  • Revista PROGRAMAR: Já está disponível a edição #60 da revista programar. Faz já o download aqui!

green angel

Menu "flutuante"

Recommended Posts

green angel

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.

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,

Share this post


Link to post
Share on other sites
green angel

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 ?

Share this post


Link to post
Share on other sites
green angel

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

Share this post


Link to post
Share on other sites
mjamado

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.

Share this post


Link to post
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

×

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.