Skip to content

Instantly share code, notes, and snippets.

@landsurveyorsunited
Created October 1, 2023 17:12
Show Gist options
  • Save landsurveyorsunited/522f238d2cbeadea2cbe5ea6c681554a to your computer and use it in GitHub Desktop.
Save landsurveyorsunited/522f238d2cbeadea2cbe5ea6c681554a to your computer and use it in GitHub Desktop.
Fold out menu

Fold out menu

Just a little experiment for an alternative to the typical slide out menu.

A Pen by JFarrow on CodePen.

License.

<div id="menu" class="menu">
<div class="menuBG leftMenuBG"></div>
<div class="menuBG rightMenuBG"></div>
<div class="label">โ˜๏ธ</div>
<div id="menuItems" class="menuItems hidden">
<div class="menuItem"><a title="USA Surveying Jobs"href="/community" target="load">๐Ÿ‡บ๐Ÿ‡ธ</a></div>
<div class="menuItem"><a title="Surveying Photos Gallery" href="/photo" target="load">๐ŸŒ๏ธ</a></div>
<div class="menuItem"><a title="Surveyor Jobs in Africa"href="/atlas" target="load">๐ŸŒ๏ธ</a></div>
<div class="menuItem"><a title="Surveying Jobs in Asia"href="/articles" target="load">๐ŸŒ๏ธ</a></div>
<div class="menuItem"><a title="Your Profile"href="https://go.srvyr.com/you" target="load">๐ŸŒ๏ธโ™‚๏ธ</a></div>
<div class="menuItem"><a title="Land Surveying Hub Communities"href="/hubs" target="load">๐Ÿ‘ทโ€</a></div>
<div class="menuItem"><a title="Global Surveying Forum"href="/forum/topics" target="load">๐Ÿ—‚๏ธ</a></div>
<div class="menuItem"><a title="Search"href="/surveyors" target="load">๐Ÿ”๏ธ</a></div>
<div class="menuItem"><a title="Surveying Tools and Resources"href="/tools" target="load">๐Ÿ”ฅ</a></div>
<div class="menuItem"><a title="Your Profile Settings"href="/main/profilesettings/edit" target="load">โš™๏ธ</a></div>
<div class="menuItem"><a title="Surveyor Toolbox"href="https://tools.landsurveyorsunited.com/" target="load">๐Ÿงฐ</a></div>
<div class="menuItem"><a title="Mentorship for Surveyors"href="/mentorship" target="load">๐Ÿง </a></div>
<div class="menuItem"><a title="Surveying History"href="link_c.html" target="load">๐Ÿฆถ</a></div>
<div class="menuItem"><a title="Surveyor Radio"href="/audio" target="load">๐ŸŽ™๏ธ</a></div>
<div class="menuItem"><a title="Your Messages"href="/profiles/message/listInbox" target="load">๐Ÿ“ฉ</a></div>
</div>
</div>
<div class="frameContainer">
<iframe class="main_iframe" name="load" scrolling="yes"></iframe>
</div>
var menuOpened = false;
function toggleMenuOpen()
{
if (menuOpened)
{
$('#menu').removeClass('menuOpen');
$('#menuItems').addClass('hidden');
menuOpened = false;
}
else
{
$('#menu').addClass('menuOpen');
$('#menuItems').removeClass('hidden');
menuOpened = true;
}
}
$(document).ready(function()
{
$('#menu').click(toggleMenuOpen);
});
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
body
{
margin: 0;
padding: 0;
background: #333;
font-family: helvetica;
}
.menu:hover {height: 50px;}
.menu
{
position: fixed;
bottom: 0;
left: 50%;
width: 300px;
height: 30px;
margin-left: -150px;
background-image: radial-gradient( circle farthest-corner at 17.1% 22.8%, rgba(226,24,24,1) 0%, rgba(160,6,6,1) 90% );
border: 1px solid rgba(255, 255, 255, 0.5);
border-bottom: 0;
border-radius: 20px 20px 0 0;
transition: all .25s cubic-bezier(0.455, 0.030, 0.515, 0.955);
z-index:2;
}
.menuBG
{
position: relative;
width: 180px;
height: 30px;
background-image: radial-gradient( circle farthest-corner at 17.1% 22.8%, rgba(226,24,24,1) 0%, rgba(160,6,6,1) 90% );
border-radius: 20px 20px 0 0;
transition: all .25s cubic-bezier(0.455, 0.030, 0.515, 0.955);
}
.leftMenuBG
{
position: relative;
left: 0;
float: left;
}
.rightMenuBG
{
left: 110px;
}
.menuOpen
{
background-image: radial-gradient( circle farthest-corner at 17.1% 22.8%, rgba(226,24,24,1) 0%, rgba(160,6,6,1) 90% );
border-top: none;
box-shadow: none;
}
.menu.menuOpen
{
border: 1px solid rgba(255, 255, 255, 0.5);
border-bottom: 0;
}
.menuOpen .leftMenuBG
{
background-image: radial-gradient( circle farthest-corner at 17.1% 22.8%, rgba(226,24,24,1) 0%, rgba(160,6,6,1) 90% );
transform: rotate(90deg) scaleY(6);
transform-origin: 100% 0%;
border-radius: 0 0 10px 10px;
border-bottom: 1px solid #fff;
border-left: 4px solid #fff;
border-right: 4px solid #fff;
}
.menuOpen .rightMenuBG
{
background-image: radial-gradient( circle farthest-corner at 17.1% 22.8%, rgba(226,24,24,1) 0%, rgba(160,6,6,1) 90% );
transform: rotate(-90deg) scaleY(6);
transform-origin: 0% 0%;
border-radius: 0 0 10px 10px;
border-bottom: 1px solid #fff;
border-left: 4px solid #fff;
border-right: 4px solid #fff;
}
.label
{
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 50px;
margin-top: -15px;
margin-left: -50px;
color: #fff;
text-align: center;
font-size: 2em;
}
.menuItems
{
position: absolute;
z-index: 10;
bottom: 180px;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
text-decoration:none!important;
flex-direction: row;
font-size: 1.7em;
transition: all 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.menuItems:hover
{
}
.menuItems.hidden
{
transform: translateY(100px) scale(0);
opacity: 0;
transition: all 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.menuItem
{
width: 30px;
height: 30px;
padding: 5px;
margin: 5px;
background-image: radial-gradient( circle farthest-corner at 10% 20%, rgba(100,43,115,1) 0%, rgba(4,0,4,1) 90% );
border: 4px solid rgba(255, 255, 255, .9);
border-radius: 50%;
text-align: center;
line-height: 30px;
color: rgba(50, 50, 50, .5);
}
.menuItem:hover {font-size:2.3em;z-index:10;}
.menuItem a {text-decoration:none!important;}
.frameContainer{
position: fixed;
height: 100%;
top:0px;
left: 0px;
right:0px;
top:0px;
bottom:0px;
z-index:1;
}
.main_iframe{
height: 100%;
width: 100%;
border:none;
background:transparent;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment