Drop-down list? 
Autor: Donald M.
Besucht 1694,
Followers 2,
Geteilt 0
I have a page which is basically a list of text links to files/pages which are not part of the website.
I would like to put these links into a drop-down list but it cannot be part of the main menu.
I cannot see a way to do this, am I missing something?
Gepostet am
Hello Donald,
If you specifically want a drop-down list then this can't be done in WebSite X5 as standard: you would need to use custom code.
However, you can create additional menus in WebSite X5 (aside from the main menu) and this can be very useful. These menus can be configured to show only certain levels in the main website map, and they can also be dropped into Objects (such as Text Objects) as an alternative to placing them in the header, footer or sidebar.
So, you could do something along these lines...
Create a hidden 'Level' in your sitemap. Create visible levels (i.e. not hidden) underneath the hidden level. These levels will be children to the parent level, and you need one for each external link to files/pages which are not part of your website.
Set the 'Properties' of each child level to open the URL of your choice, using the option 'Link to be executed on item click'
Insert a Menu Object onto the page where you want the links to be displayed. In the Menu Object properties go to Main > View > Select the menu level of the items you want to display and select the 'hidden' parent level which you created above.
That's it... it should work as intended, except that the links will show as an ordinary list instead of a drop-down list.
If you're comfortable with web programming then you could use the dropdown field in the Contact Form Object to offer your web visitors a choice of files/pages, then use the 'Send data to a file' option (on the Send tab of the Contact Form Object) to send this information to a script (e.g. PHP), which in turn opens the required file/webpage.
Kind regards,
Paul
Search the WebSite X5 Help Center
You can make a level - and then hide that level
You can then use the level ( with pages ) in a menu you put on a page. You could make the menu as a hamburger menu.
Alternatively you can make the dropdown via code.
https://www.w3schools.com/howto/howto_css_dropdown.asp
Autor
The problem with your first solution is that the entire menu appears on the page and I need this drop-down menu to be completely independent.
I really don't want to start messing about with code.
Hello Donald
If you put the code ( in my next post ) in a html-object and then set the height for the html-object to 160 then it will function out of the box.
You can then specify the links ( only link 2 in my example is active ) and also specify texts for the links.
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
max-height:100px;
overflow:scroll;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}
</style>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="http://calendarforum.dk/">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<a href="#">Link 5</a>
<a href="#">Link 6</a>
</div>
</div>
You can use the code as it is - but you can also set some colors and ather things so it suits your need.
Youn could say that the html-object is completely independent. But it is code - and so is every object you have on your page.
The advantage with this code is, that it can be copied and put into a page where you want. It will take up the space that you specify as height.
If you want the dropdown to be shown when the button is clicked and then disappear again by a new click it can be done - it only reguires some other code.
Here is the code for a dropdown by click
<style>
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
max-height:100px;
overflow:scroll;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
</style>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<a href="#">Link 1</a>
<a href="http://calendarforum.dk/">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<a href="#">Link 5</a>
<a href="#">Link 6</a>
</div>
</div>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
Autor
Thanks both, I now have a couple of options to work with.
Apologies for not marking either answer as correct, it seems I can only select one and not both!
You can mark the post that is closest to or covers what you want - this way other users can see what helped.
You could also or instead mark posts as useful - again - others can see if something was helpful for you.
But - just wait until you have checked that something IS useful
.
ciao
.