Author Topic: ShowMenu2: Adding a flag next to the menu  (Read 1446 times)

Offline svsanchez

  • Posts: 445
ShowMenu2: Adding a flag next to the menu
« on: November 11, 2016, 05:18:12 PM »
Hello!

I'm trying to add a small flag next to the showmenu2 on a responsive so that users can change the language they see the site. So far all my efforts have been in vain and the flag is placed below the showmenu2 or I'm forced to place it on top which doesn't look good. This is a picture of what I would like to achieve:


Offline dbs

  • Betatester
  • **
  • Posts: 7490
  • Gender: Male
  • tioz4ever
    • WebsiteBaker - jQuery-Plugins - Module - Droplets - Tests
Re: ShowMenu2: Adding a flag next to the menu
« Reply #1 on: November 11, 2016, 05:32:26 PM »
Hi, a link to the page could help to help.

Offline svsanchez

  • Posts: 445
Re: ShowMenu2: Adding a flag next to the menu
« Reply #2 on: November 11, 2016, 08:16:45 PM »
Hi there dbs, here's the link to the test page: http://granelsa.com/pages/oculto-02.php

As you can see the flags (banderita1.jpg and banderita2.jpg) are being placed under the menu instead of to the right of it.

Here's the portion of code that I have close to the showmenu2:

Code: [Select]
<div id="nav" class="clearfix">

<font face="Verdana" size="3">
<?php show_menu2(0SM2_ROOTSM2_ALLSM2_ALLfalse"\n</li>"falsefalsefalse'<ul id="header_menu" class="menu desktop-menu">'); ?>
</font>
<img border="0" src="http://www.granelsa.com/images/banderita1.jpg" width="24" height="15">&nbsp;&nbsp;
<img border="0" src="http://www.granelsa.com/images/banderita2.jpg" width="24" height="15">
</div>

Offline Ruud

  • Posts: 3627
  • Gender: Male
  • Do not use PM for help! Please use the forum!
    • Dev4Me - Professional WebsiteBaker Development
Re: ShowMenu2: Adding a flag next to the menu
« Reply #3 on: November 11, 2016, 11:21:18 PM »
Begin to make your menu floating.

Code: [Select]
#header_menu { float: left; }
Put the flags in their own <div> to position them.
Style the new div with:

Code: [Select]
display: inline-block;
margin: 40px 0 0 10px;

One tip:

the <font> tag is not supported in html5. Set the font using css in the #header_menu selector.


Offline Roych

  • Betatester
  • **
  • Posts: 573
  • Gender: Male
Re: ShowMenu2: Adding a flag next to the menu
« Reply #4 on: November 16, 2016, 03:27:28 PM »
For the icon with link in front of the menu I used this. (code acording to my menu)


Code: [Select]



<?php
show_menu2(
        $aMenu          0,
        $aStart         SM2_ROOT+1,
        $aMaxLevel      SM2_ALL,
        $aOptions       SM2_ALL|SM2_PRETTY,
        $aItemOpen      '<li class="[class] [if(class==menu-current){active}] [if(class==menu-expand){sub-menu}]">[a][menu_title]</a>',
        $aItemClose     '</li>',
        $aMenuOpen      '<ul>',
        $aMenuClose     '</ul>',
        $aTopItemOpen   false,
        $aTopMenuOpen   '<ul id="navigation"><li class="home-button current-menu-item">
<a href="http://www.mydomain.com"><i class="fa fa-home"></i></a>'
    ); ?>



Maybe somehow helps ;)


R

Offline svsanchez

  • Posts: 445
Re: ShowMenu2: Adding a flag next to the menu
« Reply #5 on: November 28, 2016, 11:15:49 PM »
Hello Roych, thanks for your example. I'm still trying to get this done, I tried the approach suggested by Ruud but got stuck with the css for the flag :-o

Could you post a link (or PM) to the site where you implemented that code?

Thank you!

Offline Ruud

  • Posts: 3627
  • Gender: Male
  • Do not use PM for help! Please use the forum!
    • Dev4Me - Professional WebsiteBaker Development
Re: ShowMenu2: Adding a flag next to the menu
« Reply #6 on: November 28, 2016, 11:35:40 PM »
I tried the approach suggested by Ruud but got stuck with the css for the flag :-o

Apart from the problem the menu is getting too wide when adding two flags.. This should position the flags ok.
Code: [Select]
<div style="display: inline-block; margin: 20px 0 0 10px;">
  <img src="http://www.granelsa.com/templates/Hamburguer/banderita1.jpg" width="38" height="28" border="0">
  <img src="http://www.granelsa.com/templates/Hamburguer/banderita2.jpg" width="38" height="28" border="0">
</div>
Put the code instead of the current <img> tag.

There are many more issues with this page/template.
Have a source-view look (using firefox) at your template and try to fix all "red" lines (errors). Only then you can trust css styling!