0
Welcome Guest! Login
0 items Join Now

How can I make the sub-menu items with pictures

Last Post
Search Topic
    • Yi Liu's Avatar
    • Yi Liu
    • Newbie
    • Posts: 5
    • Thanks: 0

    How can I make the sub-menu items with pictures

    Posted 8 years 10 months ago
    • Attached picture please find the final effect I'd like to achieve. I've tried to create a roknavmenu module, and change the childmenu type to Module, and insert a roksprocket(grid style) to it, and it doesn't work. Any one have an better idea? I stuck here for two days...
      Server Details (Linux/Windows, Hosting service, etc)Windows
      PHP versionPHP5.4
      Platform (name and version)Joomla3.2.1
      Template/Extension (name and version)Roknavmenu
    #1297520
    • David Goode's Avatar
    • David Goode
    • Preeminent Rocketeer
    • Posts: 17058
    • Thanks: 890
    • Web Designer and Host

    Re: How can I make the sub-menu items with pictures

    Posted 8 years 10 months ago
    • Hi there,

      Without a link to page where the problem is on your site it is quite hard for us to provide the best solution due to so many variables. We try to provide file names and line numbers for code changes and if changes have already been made then our advice may be incorrect.

      Can you please post a link to the problem and we will do our best to assist you.

      Thanks :)

    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information
    #1297768
    • Yi Liu's Avatar
    • Yi Liu
    • Newbie
    • Posts: 5
    • Thanks: 0

    Re: How can I make the sub-menu items with pictures

    Posted 8 years 10 months ago
    • Sorry, I didn't explain it clearly. Actually, it's not a problem. I'm asking how to insert my own pictures into the submenu. Just like the page demo.rockettheme.com/joomla-templates/ethereal/ Under the menu item "style",there are 10 items with pictures. Anyone knows how to create a menu like this?
    #1298188
    • David Goode's Avatar
    • David Goode
    • Preeminent Rocketeer
    • Posts: 17058
    • Thanks: 890
    • Web Designer and Host

    Re: How can I make the sub-menu items with pictures

    Posted 8 years 9 months ago
    • Hi there,

      Sorry for delay in getting back to you :blush:

      In Gantry 5 templates we use the template menu and Styles is a text-separator with a sub-menu item which is a custom html particles with the following code...

      <div class="g-grid g-preset-thumbnails center">
    <div class="g-block">
        <div class="g-content">
            <a href="?presets=preset1">
                <img src="images/rocketlauncher/styles/preset1.jpg" alt="Preset 1">
                <br>
                <span>Preset 1</span>
            </a>
        </div>
    </div>
    <div class="g-block">
        <div class="g-content">
            <a href="?presets=preset2">
                <img src="images/rocketlauncher/styles/preset2.jpg" alt="Preset 2">
                <br>
                <span>Preset 2</span>
            </a>
        </div>
    </div>
    <div class="g-block">
        <div class="g-content">
            <a href="?presets=preset3">
                <img src="images/rocketlauncher/styles/preset3.jpg" alt="Preset 3">
                <br>
                <span>Preset 3</span>
            </a>
        </div>
    </div>
    <div class="g-block">
        <div class="g-content">
            <a href="?presets=preset4">
                <img src="images/rocketlauncher/styles/preset4.jpg" alt="Preset 4">
                <br>
                <span>Preset 4</span>
            </a>
        </div>
    </div>
    <div class="g-block">
        <div class="g-content">
            <a href="?presets=preset5">
                <img src="images/rocketlauncher/styles/preset5.jpg" alt="Preset 5">
                <br>
                <span>Preset 5</span>
            </a>
        </div>
    </div>
    <div class="g-block">
        <div class="g-content">
            <a href="?presets=preset6">
                <img src="images/rocketlauncher/styles/preset6.jpg" alt="Preset 6">
                <br>
                <span>Preset 6</span>
            </a>
        </div>
    </div>    
</div>

      If this resolves your problem then please edit your first post in this thread by adding [SOLVED] at the start of the title and click on the icon and select the 'tick' icon. This lets the moderators know that it can be moved to the solved section.

      Thanks for your cooperation :)

    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information
    #1302610

Time to create page: 0.063 seconds