Create a drop-down menu on the CMS S.Builder
This is my first post on Habré, so do not judge strictly! ;)
In my first article I will tell you about how to integrate the drop-down (dynamic menu) into CMS S. Builder .
An example of a dynamic menu in action can be viewed in the original article:
http://www.sbuilder.ru/article_more.php?aid=61 .
')
Unfortunately, I could not include JavaScript in the message body here.
The menu can be horizontal or vertical. It makes no difference! Will fall anyway. ;)
I will show how to do both such and such.
I will use the free Angus Turnbull script - FreeStyle v1.0 RC9 ( http://www.twinhelix.com/ ). But on the website of the author of the script, you can download a later version of FreeStyle v1.0 RC11 ( http://www.twinhelix.com/dhtml/fsmenu/fsmenu.zip ).
From the point of view of integration into our system, there is no difference between releases of RC9 and RC11.
I stopped at this script for the following reasons:
Many thanks to Angus for the work done!
Here you can find a somewhat truncated, but translated version of the FreeStyle v1.0 RC9 script . But if you have no problems with English, then you can download the full version of FreeStyle v1.0 RC11 from the author’s site - http://www.twinhelix.com/dhtml/fsmenu/fsmenu.zip .
I will customize the menu on CMS S. Builder version 4.0 , but in this case there is practically no difference between 4.0 and 3.7. So, the article will be useful to absolutely everyone, and even those who do not create websites based on our CMS.
I will proceed from the fact that you already know where and how a regular menu is created and configured in CMS S. Builder .
So let's get started!
Suppose we have the following menu in the system:
Go to the menu design layouts:
And create a new design layout:
I switch to “Level 1” and insert the code into the fields.
In the field “Top” I insert:
<UL class = menulist id = listMenuRoot>
In the field “Item with sub-items” we put the code:
<LI> <a href="{URL}"> {TEXT} </a> {SUB_ITEMS} </ LI>
In the field "Item with sub-items (selected)" put the code:
<LI> <a href="{URL}"> {TEXT} </a> {SUB_ITEMS} </ LI>
In the field "Item without sub-items" put the code:
<LI> <a href="{URL}"> {TEXT} </a> </ LI>
In the field "Item without subparagraphs (selected)" put the code:
<LI> <a href="{URL}"> {TEXT} </a> </ LI>
In the field "Bottom" close the list:
</ Ul>
<script type = "text / javascript">
var listMenu = new FSMenu ('listMenu', false, 'visibility', 'visible', 'hidden');
listMenu.cssLitClass = 'highlighted';
function animClipDown (ref, counter)
{
var cP = Math.pow (Math.sin (Math.PI * counter / 200), 0.75);
ref.style.clip = (counter == 100?
((window.opera || navigator.userAgent.indexOf ('KHTML')> -1)? '':
'rect (auto, auto, auto, auto)'):
'rect (0,' + ref.offsetWidth + 'px,' + (ref.offsetHeight * cP) + 'px, 0)');
};
function animFade (ref, counter)
{
var f = ref.filters, done = (counter == 100);
if (f)
{
if (! done && ref.style.filter.indexOf ("alpha") == -1)
ref.style.filter + = 'alpha (opacity =' + counter + ')';
else if (f.length && f.alpha) with (f.alpha)
{
if (done) enabled = false;
else {opacity = counter; enabled = true}
}
}
else ref.style.opacity = ref.style.MozOpacity = counter / 100.1;
};
var arrow = null;
if (document.createElement && document.documentElement)
{
arrow = document.createElement ('span');
arrow.appendChild (document.createTextNode ('>'));
// You can replace the above two lines for a small arrow image ...
// arrow = document.createElement ('img');
//arrow.src = 'arrow.gif';
//arrow.style.borderWidth = '0';
arrow.className = 'subind';
}
addEvent (window, 'load', new Function ('listMenu.activateMenu ("listMenuRoot", arrow)'));
</ script>
Attention : addEvent string (window, 'load', new Function ('listMenu.activateMenu ("listMenuRoot", arrow)')); We recommend changing to listMenu.activateMenu (“listMenuRoot”, arrow); The author activates the drop-down menu only when the page is fully loaded. Because we inserted this code after displaying the menu, then we don’t need to load the entire page.
This script works with a menu constructed as a <UL> list.
There is a version that works with DIVs, but since on <UL> you can build almost any menu, we will not stop at the DIV version of the menu.
I am getting the first level so far:
Next to the tab "Level 1" there is a tab "+" I click it to add another tab "Level 2":
In the field “Top” I insert:
<Ul>
In the field “Item with sub-items” we put the code:
<LI> <a href="{URL}"> {TEXT} </a> {SUB_ITEMS} </ LI>
In the field "Item with sub-items (selected)" put the code:
<LI> <a href="{URL}"> {TEXT} </a> {SUB_ITEMS} </ LI>
In the field "Item without sub-items" put the code:
<LI> <a href="{URL}"> {TEXT} </a> </ LI>
In the field "Item without subparagraphs (selected)" put the code:
<LI> <a href="{URL}"> {TEXT} </a> </ LI>
In the field "Bottom" close the list:
</ Ul>
Continuing this way I set up the desired number of levels.
Attention: if the design of the level is not set, then it will be built on the basis of the design of the previous level. Therefore, in our case, it is enough to configure two levels - Level 1 and Level 2.
Now I need to place this menu in the page design layout. This is done as follows:
To do this, I turn to the design layouts of the site “Developer Menu” -> “Site Design Layouts”:
Open the desired layout for editing by clicking on it with the right mouse button and selecting “Edit design layout” from the context menu that appears (you can simply click on the template name):
In the window that opens, select the “Related components” tab:
In the list that appears, I find an edited block “MAIN MENU”, this is the block that I need now.
Further in the column “Type of component” I select the component of the module “Site navigation -> Menu display” we need:
Now I click the settings icon:
In the window that opens, select a section (it’s the menu) of the site:
And go to the tab "Properties":
I choose the layout of the design. I tick off “Keep selection at top-level items”. And I press the "Select" button.
That's all! Menu on the page posted!
Yes!
I almost forgot! In the design layout, in the <HEAD> ... </ HEAD> tag you need to place:
<link rel = "stylesheet" type = "text / css" href = "/ css / listmenu_v.css" />
<script type = "text / javascript" src = "/ scripts / fsmenu.js"> </ script>
<noscript> <link rel = "stylesheet" type = "text / css" href = "/ css / listmenu_fallback.css" /> </ noscript>
Moreover, if you need a horizontal drop-down menu, in the first line specify:
<link rel = "stylesheet" type = "text / css" href = "/ css / listmenu_h.css" />
If vertical, then:
<link rel = "stylesheet" type = "text / css" href = "/ css / listmenu_v.css" />
I assume that you know how to upload the necessary files to the appropriate folders on the server.
We get:
Look what happened:
Everything is working!
By changing the styles in the listmenu_v.css or listmenu_h.css file, you can achieve various menu display options:
Perhaps a much more serious change in the design of the menu. Virtually any!
Use!
More complete instructions on setting up the menu (including setting background images for items, etc.) are in the menu file.
About this further ...
Menu styles have a wide range of settings! I do not see any reason to paint them within the article. they are detailed in the corresponding files:
Download the archive with the script files here .
If you like, write and I will continue this cycle!
In my first article I will tell you about how to integrate the drop-down (dynamic menu) into CMS S. Builder .
An example of a dynamic menu in action can be viewed in the original article:
http://www.sbuilder.ru/article_more.php?aid=61 .
')
Unfortunately, I could not include JavaScript in the message body here.
The menu can be horizontal or vertical. It makes no difference! Will fall anyway. ;)
I will show how to do both such and such.
I will use the free Angus Turnbull script - FreeStyle v1.0 RC9 ( http://www.twinhelix.com/ ). But on the website of the author of the script, you can download a later version of FreeStyle v1.0 RC11 ( http://www.twinhelix.com/dhtml/fsmenu/fsmenu.zip ).
From the point of view of integration into our system, there is no difference between releases of RC9 and RC11.
I stopped at this script for the following reasons:
- CSS and JavaScript codes are completely separated. Therefore, when integrating the script, knowledge of JavaScript is not needed. All you need to know is CSS. But if you have a desire to modify something in JavaScript code, then your code with detailed comments of the author is at your service;
- Cross-browser script;
- The logic of the script operation completely coincides with the logic of the Menu module in the CMS S. Builder .
Many thanks to Angus for the work done!
Here you can find a somewhat truncated, but translated version of the FreeStyle v1.0 RC9 script . But if you have no problems with English, then you can download the full version of FreeStyle v1.0 RC11 from the author’s site - http://www.twinhelix.com/dhtml/fsmenu/fsmenu.zip .
I will customize the menu on CMS S. Builder version 4.0 , but in this case there is practically no difference between 4.0 and 3.7. So, the article will be useful to absolutely everyone, and even those who do not create websites based on our CMS.
I will proceed from the fact that you already know where and how a regular menu is created and configured in CMS S. Builder .
So let's get started!
Suppose we have the following menu in the system:
Go to the menu design layouts:
%2520/%25202)%2B%2522,top%3D%2522%2B((screen.availHeight-226)%2520/%25202))%3Bwnd.focus()%3B)
And create a new design layout:
I switch to “Level 1” and insert the code into the fields.
In the field “Top” I insert:
<UL class = menulist id = listMenuRoot>
In the field “Item with sub-items” we put the code:
<LI> <a href="{URL}"> {TEXT} </a> {SUB_ITEMS} </ LI>
In the field "Item with sub-items (selected)" put the code:
<LI> <a href="{URL}"> {TEXT} </a> {SUB_ITEMS} </ LI>
In the field "Item without sub-items" put the code:
<LI> <a href="{URL}"> {TEXT} </a> </ LI>
In the field "Item without subparagraphs (selected)" put the code:
<LI> <a href="{URL}"> {TEXT} </a> </ LI>
In the field "Bottom" close the list:
</ Ul>
<script type = "text / javascript">
var listMenu = new FSMenu ('listMenu', false, 'visibility', 'visible', 'hidden');
listMenu.cssLitClass = 'highlighted';
function animClipDown (ref, counter)
{
var cP = Math.pow (Math.sin (Math.PI * counter / 200), 0.75);
ref.style.clip = (counter == 100?
((window.opera || navigator.userAgent.indexOf ('KHTML')> -1)? '':
'rect (auto, auto, auto, auto)'):
'rect (0,' + ref.offsetWidth + 'px,' + (ref.offsetHeight * cP) + 'px, 0)');
};
function animFade (ref, counter)
{
var f = ref.filters, done = (counter == 100);
if (f)
{
if (! done && ref.style.filter.indexOf ("alpha") == -1)
ref.style.filter + = 'alpha (opacity =' + counter + ')';
else if (f.length && f.alpha) with (f.alpha)
{
if (done) enabled = false;
else {opacity = counter; enabled = true}
}
}
else ref.style.opacity = ref.style.MozOpacity = counter / 100.1;
};
var arrow = null;
if (document.createElement && document.documentElement)
{
arrow = document.createElement ('span');
arrow.appendChild (document.createTextNode ('>'));
// You can replace the above two lines for a small arrow image ...
// arrow = document.createElement ('img');
//arrow.src = 'arrow.gif';
//arrow.style.borderWidth = '0';
arrow.className = 'subind';
}
addEvent (window, 'load', new Function ('listMenu.activateMenu ("listMenuRoot", arrow)'));
</ script>
Attention : addEvent string (window, 'load', new Function ('listMenu.activateMenu ("listMenuRoot", arrow)')); We recommend changing to listMenu.activateMenu (“listMenuRoot”, arrow); The author activates the drop-down menu only when the page is fully loaded. Because we inserted this code after displaying the menu, then we don’t need to load the entire page.
This script works with a menu constructed as a <UL> list.
There is a version that works with DIVs, but since on <UL> you can build almost any menu, we will not stop at the DIV version of the menu.
I am getting the first level so far:
Next to the tab "Level 1" there is a tab "+" I click it to add another tab "Level 2":
In the field “Top” I insert:
<Ul>
In the field “Item with sub-items” we put the code:
<LI> <a href="{URL}"> {TEXT} </a> {SUB_ITEMS} </ LI>
In the field "Item with sub-items (selected)" put the code:
<LI> <a href="{URL}"> {TEXT} </a> {SUB_ITEMS} </ LI>
In the field "Item without sub-items" put the code:
<LI> <a href="{URL}"> {TEXT} </a> </ LI>
In the field "Item without subparagraphs (selected)" put the code:
<LI> <a href="{URL}"> {TEXT} </a> </ LI>
In the field "Bottom" close the list:
</ Ul>
Continuing this way I set up the desired number of levels.
Attention: if the design of the level is not set, then it will be built on the basis of the design of the previous level. Therefore, in our case, it is enough to configure two levels - Level 1 and Level 2.
Now I need to place this menu in the page design layout. This is done as follows:
To do this, I turn to the design layouts of the site “Developer Menu” -> “Site Design Layouts”:
Open the desired layout for editing by clicking on it with the right mouse button and selecting “Edit design layout” from the context menu that appears (you can simply click on the template name):
In the window that opens, select the “Related components” tab:
In the list that appears, I find an edited block “MAIN MENU”, this is the block that I need now.
Further in the column “Type of component” I select the component of the module “Site navigation -> Menu display” we need:
Now I click the settings icon:
In the window that opens, select a section (it’s the menu) of the site:
And go to the tab "Properties":
I choose the layout of the design. I tick off “Keep selection at top-level items”. And I press the "Select" button.
That's all! Menu on the page posted!
Yes!
I almost forgot! In the design layout, in the <HEAD> ... </ HEAD> tag you need to place:
<link rel = "stylesheet" type = "text / css" href = "/ css / listmenu_v.css" />
<script type = "text / javascript" src = "/ scripts / fsmenu.js"> </ script>
<noscript> <link rel = "stylesheet" type = "text / css" href = "/ css / listmenu_fallback.css" /> </ noscript>
Moreover, if you need a horizontal drop-down menu, in the first line specify:
<link rel = "stylesheet" type = "text / css" href = "/ css / listmenu_h.css" />
If vertical, then:
<link rel = "stylesheet" type = "text / css" href = "/ css / listmenu_v.css" />
I assume that you know how to upload the necessary files to the appropriate folders on the server.
We get:
Look what happened:
Everything is working!
By changing the styles in the listmenu_v.css or listmenu_h.css file, you can achieve various menu display options:
Perhaps a much more serious change in the design of the menu. Virtually any!
Use!
More complete instructions on setting up the menu (including setting background images for items, etc.) are in the menu file.
About this further ...
We analyze the files in the archive drop-down menu
Menu styles have a wide range of settings! I do not see any reason to paint them within the article. they are detailed in the corresponding files:
- fsmenu.html - file with an example and description of the menu.
Attention: Instructions for setting are located directly in the HTML code of the file; - fsmenu.js - JavaScript menu itself. This is the drop down menu! Do not forget to connect it. Without this file, the menu will not work;
- listmenu_v.css - CSS file, with the settings of the vertical drop - down menu. You can connect this file separately or include its code in your CSS file;
- listmenu_h.css - CSS file, with settings for the horizontal drop-down menu. You can connect this file separately or include its code in your CSS file;
- listmenu_fallback.css - this file implements the menu without using JavaScript. Used if the user has javascript disabled in the browser.
Download the archive with the script files here .
If you like, write and I will continue this cycle!
Source: https://habr.com/ru/post/40583/
All Articles