15 Navigation Bar | with submenus

03 May 2015

Hello darlings!

Another online class in web design, iey!

This one has been one of your top requests! In this online class you are going to learn how to create a navigation bar with submenus, just like mine.

If you don't want sub menus on your navigation bar you can learn how to do a simple one in my first online class.

Let's get started?

Let's add css first. To do that you have to go to to TEMPLATE page, click on EDIT HTML. Search for and click on the triangle next to it, and put this css code before
Right before that add this code:

We are almost done, I promised! We just need to add our html code, change some links and we're done!
Now, in the same page, search for  and put the code bellow AFTER it. Change all the links to yours and the name of your categories, add more submenus or simple buttons and you're done.

Where it says SIMPLE change it to the name of your category that doesn't have submenus and near that you are going to find LINK, and you need to put there the link of that category. Where it says SUBMENU change it to the name of the category that has submenus (this one doesn't have a link, so don't add it). Right bellow SUBMENU you are going to see some words: NAME 1, NAME 2, change it to the names of your labels, and near each word you are going to see the word LINK , just change that word for the link of each label. Easy?
This code was made by me, hope it helps in some way.


xoxo

15 comments:

  1. Muito util, tenho de experimentar!
    Nova parceria e por isso novo post no blog!! xx,

    http://essenceoffashionn.blogspot.pt/20…/…/Young-spirit.html

    ReplyDelete
  2. Segui o teu tutorial do menu anterior e adorei. Tenho a certeza que este funcionará tão bem como o outro por isso OBRIGADA, Maria. <3 Beijinhos da Pirralha

    ReplyDelete
  3. Obrigada por partilhares o teu conhecimento de web design connosco, é muito útil futuramente. Beijinhos :)

    ReplyDelete
  4. Blog mais fofo, pensava que eras inglesa aw :3

    ReplyDelete
  5. Gostei muito do tutorial, vou guardá-lo para se um dia precisar :)

    beijinhos
    http://pretty-little-stories.blogspot.com

    ReplyDelete
  6. Andei tanto tempo à procura disto! Obrigada Maria :)
    xoxo, Ana

    The Insomniac Owl Blog

    ReplyDelete
  7. Thanks so much for this tutorial! This was so clear and easy to follow in comparison to others I've seen!

    Gem
    gemsbabble.blogspot.com

    ReplyDelete
  8. Oh eu tentei mas não consegui, penso que segui os passos todos mas ao terminar ao ver o blog aparecem-me os links todos de lado. O que achas que fiz mal? :x
    beijinhos

    thefancycats.blogspot.com

    ReplyDelete
  9. R: Obrigada Maria! Eu as cores e isso ainda consigo fazer haha. Já estive a mudar o tal código mas mesmo assim deve estar algo errado xD Mas não precisas de te maçar com isso! Obrigada na mesma. <33
    beijinhos

    ReplyDelete
  10. Very easy to follow and simple, thank you for sharing with us!

    ReplyDelete
  11. Eu desisto dá-me sempre erro a por a barra :c sou um zero à esquerda nesta coisa :c

    ReplyDelete
  12. é verdade querida, usei este tutorial no meu template e funcionou às mil maravilhas. Mas teve de ser todo do zero, porque eu tinha o antigo sem submenus, e editá-lo para ficar como este - isso não funcionava, dava erro. :p

    ReplyDelete
  13. Ah e inclui-o também no template que estou a disponibilizar para download :p

    ReplyDelete
  14. Segui os passos e consegui fazer na perfeição!
    Obrigada Maria! :)

    http://glamourandsparkletrends.blogspot.pt/

    ReplyDelete
  15. Muito obrigada pelos teus tutoriais. Têm ajudado muito :)
    Não há forma de colocar o menu por baixo do cabeçalho?
    Beijinhos

    http://aboemiacatita.blogspot.pt

    ReplyDelete