Turn dbTopMenu into a select

Has someone does ths before..
Turn the dbTopMenu into a select instead of table row with href links?

The file: templates\base\designbox_menu_1.html is where i tried to change it.
The select isn't the hard part that works.
But the <option value="__action__" > __title__ </option> doesn't show real text.

Any help is helpful!!

Quote · 14 Jun 2014

you have to define the __action__ and __title__ variables. For this - you gotta find the correct .php page to add/edit these values. And that is provided it will even work the way you want it to.

caredesign.net
Quote · 14 Jun 2014

 

find the correct .php page to add/edit these values

 that is just my problem now.. the variable names are the freakin same like __title__ the return you get are 20+ php files to choose from. why is this feature not base (standard) i wonder.

Developers: where can i find the code for this to change?

Quote · 15 Jun 2014

In order to change "dbTopMenu" you should edit templates/base/designbox_menu_1.html file. Besides that, you will need to make an active element to be displayed first each time, which requires dbTopMenu logics edit. Here is a tutorial on how to make it. I will turn design box menu into a list instead of select as it is easier to style and do not require js to work as select does. The main idea is to always show an active element of a list and show the other items when it is hovered.

1. Go to Dolphin admin panel -> tools -> cache -> settings and disable "Enable Cache For CSS Files" and  "Enable Cache For JS Files" options. Then clear all cache.

HTML file was heavily changed, so just download a ready "designbox_menu_1.html" from "templates/tmpl_uni/" folder in the attachment and upload to your tmpl_*yourtemplate* directory.

2. We need to make an active item to go first. Find "Dolphin root/inc/classes/BxDolPageView.php" file and "getBlockCaptionItemCode" function in it. Paste the following code at the beginning of it on line 487:

 

///return if no db menu links exist

if(empty($aLinks))

return;

 

3. The following on line 556 before "$bFirst = false;" string:

///make an active item to be a first element of an array

if((bool)$aLink['active'])

array_unshift($aItems, array_pop($aItems));

 
4. Now you need to apply styles to a new  ul.dbTmCntLine list and its items. Find "css/common.css" file in your template directory or create a new one with importing the base css file. Paste the following styles at the end of the file:
ul.dbTmCntLine {
list-style:none;
position:absolute;
margin:0;
padding:4px 6px 0;
right:0;
top:0;
box-shadow:0 0 3px rgba(0,0,0,0.4);
}
 
ul.dbTmCntLine .notActive {
display:none; /* hide inactive items*/
}
 
ul.dbTmCntLine:hover .notActive {
display:block; /* show inactive items on hover*/
}

 

If you have troubles on any step you can look at ready files from the attachment.

 

Best regards, nuknspax.

dbTopMenu list.zip · 8.5K · 451 downloads
Free and premium Dolphin templates. Custom design services.
Quote · 15 Jun 2014

thank you for the example and script. But I have custum template and i can't get it to work!
Does this work on your site? Do you have screenshots?


Quote · 15 Jun 2014

Keep in mind that the hover pseudo class does not behave well on all mobile devices, while selectors do.

My opinions expressed on this site, in no way represent those of Boonex or Boonex employees.
Quote · 15 Jun 2014

 

while selectors do.

that is why i want select on edit profile page and timeline dbtopmenu
I wonder if someone has done it on there site..?

Quote · 15 Jun 2014

My bad, I included the wrong html file in the package, sorry. Use the one attached here. Here is the demo:

http://nuknspax.com/d71/index.php?skin=uni

designbox_menu_1.html · 746B · 516 downloads
Free and premium Dolphin templates. Custom design services.
Quote · 15 Jun 2014

I must say "WOW" I really like the way that looks. And sorry in advance - as I will be using this tip. Seeing as how this is a great idea (especially for those like myself who have custom modules with quite a few of those links), your solution makes everything look a lot cleaner. Would you mind posting this in the Tips, Tricks, and Sharing thread? Or can a mod move this over? This is very useful info.

@HL. I looked on different devices, and I did have a slight issue with the ipad. Apparently, to get the dropdown items to display, I have to click the button and slide my finger down for the options to display. Not too big of an issue. On my Note, with the S-Pen, just hovering over the button with the oen shows the options.

caredesign.net
Quote · 15 Jun 2014

 re

My bad, I included the wrong html file in the package, sorry. Use the one attached here. Here is the demo:

http://nuknspax.com/d71/index.php?skin=uni

 It doesn't work on my Surface I

My opinions expressed on this site, in no way represent those of Boonex or Boonex employees.
Quote · 15 Jun 2014

 re

 

while selectors do.

that is why i want select on edit profile page and timeline dbtopmenu
I wonder if someone has done it on there site..?

 I'm doing it for the mobile template I'm building, The forum pages are easy... the rest is a little more involved. Unfortunately, the work I've done is on a hdd sitting on my kitchen counter, while the rest of the laptop is in the repair shop.

My opinions expressed on this site, in no way represent those of Boonex or Boonex employees.
Quote · 15 Jun 2014

instead of first example here is my select form for testing.

Please give me feedback

designbox_menu_1.html · 1.5K · 508 downloads
Quote · 15 Jun 2014

thank you for your dbtopmenu code. It looks and works nice.
I made it into a selector to see if that would be easier on a smartphone. (still tweaking tho..)

Quote · 16 Jun 2014

this comes from the designbox_menu_2.html.
in pc/laptop browsers is works fine, but on smartphone it doesn't!!
don't worry about the <td> i'm still tweaking.

What could it be...
Code below
_______________________________________________

<div id="dbTopMenu__id__" class="dbTopMenu">
    <div class="dbTmCenter">
        <div id="dbTmContent__id__" class="dbTmContent">
<select id="selectOpt" class="dbTmCntLine">
<optgroup label="<?php echo(_t("_select_option_text")); ?>">
                    <bx_repeat:items>
                       
                             <td id="__id__-pas" class="notActive" __show_passive__>
                            <bx_if:icon_pas><img __class__ src="__src__" /></bx_if:icon_pas>
                            <bx_if:texticon_pas><i class="sys-icon __icon__"></i></bx_if:texticon_pas>
                            <option id="__id__" __class__ __href__ __target__ __on_click__><a id="__id__" __class__ __href__ __target__ __on_click__>__title__</a></option>
                    </td></bx_repeat:items>
                </optgroup>
    </select>
        </div>
    </div>
    <div class="clear_both">&nbsp;</div>
    <script type="text/javascript" language="javascript">
        $('#dbTopMenu__id__').addClass('dbTopMenuHidden').parents('.disignBoxFirst').ready(function() {
            dbTopMenuLoad('__id__');
        });
    </script>

</div>

Quote · 17 Jun 2014

 

__action__ and __title__


Just to point this out to people. Things like __action__ and __title__ you find in templates are not variables and should not be referred to as such.

These are merely tags. Marker points if you will that represent the name of a key within the Associative array that contains the replacement values that is passed to the function that processes the template. And because they are not variables they are not global as people think they are and also do not contain the same thing from template to template.

https://www.deanbassett.com
Quote · 17 Jun 2014

thanx Deano92964 for pointing that out.
But i found out that this option doesn't work in Google chrome browser (pc) either.

IE, O, FF no problem! (not smartphone)

Maybe you have the solution for me/us :-)

Quote · 17 Jun 2014

I still believe lists have more space for development than selects. I have added a simple js function that toggles menu visibility on click. Demo available here:

http://nuknspax.com/d71/index.php?skin=uni

In the zip file attached is a ready version for UNI template. To apply it to a custom template you need to:

1. Apply steps 2 and 3 from the tutorial above.

2. Upload 'templates/tmpl_uni/designbox_menu_1.html' file from the pack to 'Dolphin root/templates/tmpl_yourTemplate/'. Replace the old file if required.

3. Add 3 css rules from 'templates/tmpl_uni/css/common.css' to the end of your common.css file or upload the one from the pack if there is no such file.

dbMenuList.zip · 8.4K · 407 downloads
Free and premium Dolphin templates. Custom design services.
Quote · 19 Jun 2014

Thank you all for your feedback.

@solusoft It seems you are altering a designbox_menu_1.html from the zip pack I provided which is incorrect version and will not work. I have attached another html file in the post above.

@houstonlively I have tested the integration process a couple times and it is working.  Please provide your browser info and screenshots.

@professorSr Once the solution will be mobile friendly and tested it could be posted in tips and tricks forum. So, please test and leave your feedback.

Free and premium Dolphin templates. Custom design services.
Quote · 19 Jun 2014

 re

I still believe lists have more space for development than selects. I have added a simple js function that toggles menu visibility on click. Demo available here:

http://nuknspax.com/d71/index.php?skin=uni

In the zip file attached is a ready version for UNI template. To apply it to a custom template you need to:

1. Apply steps 2 and 3 from the tutorial above.

2. Upload 'templates/tmpl_uni/designbox_menu_1.html' file from the pack to 'Dolphin root/templates/tmpl_yourTemplate/'. Replace the old file if required.

3. Add 3 css rules from 'templates/tmpl_uni/css/common.css' to the end of your common.css file or upload the one from the pack if there no such file.

 You need to put a down arrow next to the list to let people know there's something more available.

My opinions expressed on this site, in no way represent those of Boonex or Boonex employees.
Quote · 19 Jun 2014

Thanx nuknspax for the new zip file.
If people use the default timeline then they need to alter the designbox_menu_2.html too i think.

I have it all working with a select on my site now.
But I use your idea on the groups timeline. But i opend up the options.
As it also works better on smartphone

see attachment 1.

for select example see attachment 2.

timeline-example.jpg · 43.7K · 490 views
select-example.jpg · 41.3K · 458 views
Quote · 19 Jun 2014

I have it al working now!

Thanx to AndrewP for clearing the GWALL dbtopmenu issue.
and to nuknspax for getting me started in the right direction.
plus all the others for the extra input.

I really think this should be standard for the next update (7.1.5 or 6 version)

Quote · 23 Jun 2014
 
 
Below is the legacy version of the Boonex site, maintained for Dolphin.Pro 7.x support.
The new Dolphin solution is powered by UNA Community Management System.