Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Oct 2005
    Posts
    336
    Thanks
    43
    Thanked 2 Times in 2 Posts

    Can anyone help with my Horizontal Nav Menu CSS in Joomla

    Can anyone help me out with trying to create a horizontal navigation menu similar to the one at the very top of this page -http://support.apple.com/kb/HT1451 Im not bothered about the search box, just creating the menu items and css for the images.

    I am using Joomla and it giving me some trouble working out how to code the CSS, inparticular how to make the background images to "stretch" when items are added to the menu.

    For my attempt at this I have created two background images, one for the left-hand corner, and one long one to stretch across the menu from the left which can be seen here -
    http://www.tomsspecialreserve.co.uk/menu_images.html

    Joomla outputs this html -
    Code:
    <ul class="menu_toms_navmenu">
    <li class="item143"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=12&amp;Itemid=143"><span>test1</span></a></li>
    <li class="item144"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=13&amp;Itemid=144"><span>test2</span></a></li>
    <li class="item145"><a href="/joomla/index.php?option=com_search&amp;view=search&amp;Itemid=145"><span>test3</span></a></li>
    </ul>
    I cannot work out the CSS to complete the effect. Do I need to use divs as background image wappers?
    Last edited by moss2076; 11-05-2009 at 11:57 AM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    moss2076 (11-05-2009)

  • #3
    Regular Coder
    Join Date
    Oct 2005
    Posts
    336
    Thanks
    43
    Thanked 2 Times in 2 Posts
    Thankyou for replying. I have had a look at the link and the problem I have with creating that menu in Joomla is I cannot give the first or last menu items my own class names, e.g. class="left_menu_item" as all menu item names are created by Joomla automatically eg class="item143", "item144" etc.

    So, if I use a Joomla class name as for a corner image eg "item144", when I add more items to the menu the class names alter, I have to adjust the CSS displaying the corner image to whatever the new last class name is. And its such a pain! I was hoping there may be a way around it.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    I haven't tried, but hopefully there's a solution at http://cecilgupta.com/?p=122
    Last edited by abduraooft; 11-05-2009 at 12:56 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Regular Coder
    Join Date
    Oct 2005
    Posts
    336
    Thanks
    43
    Thanked 2 Times in 2 Posts
    Cool, I will have a look at that link and post back later on..


  • #6
    Regular Coder
    Join Date
    Oct 2005
    Posts
    336
    Thanks
    43
    Thanked 2 Times in 2 Posts
    Yup that code has worked, I now have first and last items in my menu

    I've used overrides lots of times before, I just didn't think of it in this instance.

    You are a genius! Thankyou!


  •  

    LinkBacks (?)

    1. 08-25-2014, 11:30 AM

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •