Dropdown Forum Navigator Selector (Solved for Cloud)
Want a quick forum selector added to your site? Look no further, now you can with the use of a static HTML module yet again.
Go to sitebuilder > edit page > add static html module
These are the forums/subforums I use on my site. This is a combination of HTML and Javascript to run the function goToNewPage
Below is the CSS I used to make the dropdown menu blend into my site and to look like I want it to. You may have to play with it to get it to be what you want and change the module number to whatever the module number you have to get the effects here that I used.
Here is a picture of what it looks like:
Go to sitebuilder > edit page > add static html module
Code:
<!DOCTYPE html>
<html>
<body>
<style>
.myBtn:hover {
background: #990000 !important;
color: #FFFFFF;
border: 1px solid #D2D2D2;
border-radius: 8px;
padding: 2 !important;
font: inherit;
cursor: pointer;
}
.myBtn {
background: #FFFFFF !important;
color: #990000;
border: 1px solid #D2D2D2;
border-radius: 8px;
padding: 1 !important;
font: inherit;
cursor: pointer;
text-decoration: underline;
}
body select {
background-color: #FFFFFF;
}
</style>
<select name="list" id="list" accesskey="target">
<option value="">Choose a forum...</option>
<optgroup label="Sports Forum">
<option value="https://www.dirtburglars.com/forum/sports-forums/athletics"> Athletics</option>
<option value="https://www.dirtburglars.com/forum/sports-forums/athletics/football"> Football</option>
<option value="https://www.dirtburglars.com/forum/basketball"> Basketball</option>
<option value="https://www.dirtburglars.com/forum/sports-forums/athletics/recruiting"> Recruiting</option>
<option value="https://www.dirtburglars.com/forum/sports-forums/athletics/fantasy-sports"> Fantasy Sports</option>
<option value="https://www.dirtburglars.com/forum/sports-forums/athletics/other-sports"> Other Sports</option>
<option value="https://www.dirtburglars.com/forum/sports-forums/the-press-box"> The Press Box</option>
<option value="https://www.dirtburglars.com/forum/sports-forums/the-press-box/podcasts"> Podcasts</option>
</optgroup>
<optgroup label="General Topics">
<option value="https://www.dirtburglars.com/forum/general-topics/the-stacks"> The Stacks</option>
<option value="https://www.dirtburglars.com/forum/general-topics/the-stacks/the-pub"> The Pub</option>
<option value="https://www.dirtburglars.com/forum/general-topics/the-stacks/entertainment-tech"> Entertainment & Tech</option>
<option value="https://www.dirtburglars.com/forum/make-me-a-sammich"> Make Me A Sammich</option>
<option value="https://www.dirtburglars.com/forum/general-topics/marketplace"> Marketplace</option>
<option value="https://www.dirtburglars.com/forum/general-topics/forum-help-feedback"> Forum Help & Feedback</option>
<option value="https://www.dirtburglars.com/forum/general-topics/frequently-asked-questions"> Frequently Asked Questions</option>
</optgroup>
<optgroup label="Forum Archives">
<option value="https://www.dirtburglars.com/forum/forum-archives/game-threads"> Game Threads</option>
<option value="https://www.dirtburglars.com/forum/forum-archives/heisman-park"> The Heisman</option>
<option value="https://www.dirtburglars.com/forum/general-topics/stillwater-ok"> Stillwater, OK</option>
</optgroup>
<select>
<input class ="myBtn" type=button value="Go" onclick="goToNewPage()" />
<script type="text/javascript">
function goToNewPage()
{
var url = document.getElementById('list').value;
if(url != 'none') {
window.location = url;
}
}
</script>
</body>
</html>
Below is the CSS I used to make the dropdown menu blend into my site and to look like I want it to. You may have to play with it to get it to be what you want and change the module number to whatever the module number you have to get the effects here that I used.
Code:
/* Forum Jump Navigator 2 on Subforum Menu Dropdown Selector */
.b-module.b-module--flush-vertical {
margin-top: -14px !important;
margin-bottom: 4px !important;
}
#widget_198 .b-icon__toggle-collapse {
display: none;
}
#widget_198 .b-module.canvas-widget.default-widget.custom-html-widget {
border: none;
background-color: #FFFFFF;
}
#widget_198 .channel-description {
margin-bottom: 2em;
}
#widget_198 select {
margin-bottom: 10px;
margin-top: 2px;
border: 2px solid #990000;
}
#widget_198 .widget-header {
margin-bottom: 5px;
}
#widget_198 .widget-header h1 {
font-size: 12px;
color: #990000;
background: none 0 0,#FFFFFF;
margin-bottom: -10px;
margin-top: 10px;
margin-left: 18px;
}
#widget_198 .widget-header {
background: none 0 0,#FFFFFF;
}
#widget_198 .widget-header .h-clearfix {
background-color: #FFFFFF;
margin-top: 10px;
border: 0;
}
#widget_198 .widget-header-divider {
display: none;
}
#widget_198 .canvas-layout-container .canvas-widget .widget-header {
border: none;
}
#widget_198 {
background-color: #FFFFFF;
border: none;
padding: 0;
margin: 0;
font-size: 12px;
text-transform: capitalize;
font: small-caps bold 12px Arial,sans-serif;
}
#widget_198 .module-title.h-left {
margin: 0;
}
.canvas-layout-container .canvas-widget:not(.widget-no-border) .widget-header {
border: none !important;
}
Here is a picture of what it looks like:
Comment