Mobile Hamburger Menu in Default PlayTube Theme  

  RSS

Disquy
(@disquy)
Member Admin
Joined: 2 years  ago
Posts: 88
November 4, 2018 2:27 pm  

I've had a couple ask for the hamburger menu I use on vigeos.net. It's not the best looking, but it gets the job done for me. Also this is probably one of the larger code modifications, just to give a heads up. This will also take some customization on your behalf as well, as I manually added each link. I figured I'd only be doing it once as I originally built this for my use, not thinking anyone else would be using it, so I never automated it to pull in current categories. Sorry, maybe in the future I will automate this a bit more. Anyway, on with the modifications.

Note: Always backup your db and any files to be modified just to be safe. These types of modifications are not a simple plug and play kind of install. I am not responsible for any loss of data nor does this script come with any guarantee. This script is provided as is.

\themes\default\layout\content.html around line #18 find

		<div class="pull-right">
<ul class="nav navbar-nav navbar-right">
<?php if ($pt->config->night_mode == 'both' || $pt->config->night_mode == 'night_default'): ?>
<li class="toggle-mode hidden-xs pull-left top-header">
<label class="switch" data-toggle="tooltip" data-placement="bottom" title="{{LANG mode}}">
<input type="checkbox" {{MODE}} id="toggle-mode">
<span class="slider round">
<svg fill="#009da0" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" class="feather feather-bulb"><path d="M12,6A6,6 0 0,1 18,12C18,14.22 16.79,16.16 15,17.2V19A1,1 0 0,1 14,20H10A1,1 0 0,1 9,19V17.2C7.21,16.16 6,14.22 6,12A6,6 0 0,1 12,6M14,21V22A1,1 0 0,1 13,23H11A1,1 0 0,1 10,22V21H14M20,11H23V13H20V11M1,11H4V13H1V11M13,1V4H11V1H13M4.92,3.5L7.05,5.64L5.63,7.05L3.5,4.93L4.92,3.5M16.95,5.63L19.07,3.5L20.5,4.93L18.37,7.05L16.95,5.63Z" /></svg>
</span>
</label>
</li>
<?php endif; ?>
<li class="show-in-mobile pull-left top-header">
<a href="#" class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg> </a>
</li>

 

Below add

<li class="show-in-mobile pull-left top-header menu-btn"><a class="btn-open" href="javascript:void(0)"><i class="fa fa-bars" aria-hidden="true"></i></a></li>

 

Find in same file

<?php } ?>

<?php if (IS_LOGGED): ?>
<script>

 

Above add this code, you will need to add the links you want to show.

<div class="overlay">
<div class="menu">
<ul>

<ul>
<li style="padding-bottom: 0;"><font color="white"><h2>Menu</h2></font></li>
<hr style="margin-top: 0;">
<li><a href="https://www.vigeos.net/videos/latest">Latest</a> | <a href="https://www.vigeos.net/videos/trending">Trending</a> | <a href="https://www.vigeos.net/videos/top">Top</a> | <a href="https://www.vigeos.net/submissions">Submissions</a></li>
<br>
<li style="padding-bottom: 0;"><font color="white"><h2>Categories</h2></font></li>
<hr style="margin-top: 0;">
</ul>
<ul class="cat-full-menu">
<li><a href="https://www.vigeos.net/videos/category/1">Adventure</a></li>
<li><a href="https://www.vigeos.net/videos/category/30">Auto</a></li>
<li><a href="https://www.vigeos.net/videos/category/40">Comedy</a></li>
<li><a href="https://www.vigeos.net/videos/category/45">Cool</a></li>
<li><a href="https://www.vigeos.net/videos/category/46">Not Cool</a></li>
<li><a href="https://www.vigeos.net/videos/category/50">Cringe</a></li>
<li><a href="https://www.vigeos.net/videos/category/60">Cute</a></li>
<li><a href="https://www.vigeos.net/videos/category/70">Entertainment</a></li>
<li><a href="https://www.vigeos.net/videos/category/80">Food</a></li>
<li><a href="https://www.vigeos.net/videos/category/90">Gadgets</a></li>
<li><a href="https://www.vigeos.net/videos/category/100">Gaming</a></li>
<li><a href="https://www.vigeos.net/videos/category/110">Health</a></li>
<li><a href="https://www.vigeos.net/videos/category/120">How To</a></li>
<li><a href="https://www.vigeos.net/videos/category/130">Interesting</a></li>
<li><a href="https://www.vigeos.net/videos/category/140">Love</a></li>
<li><a href="https://www.vigeos.net/videos/category/145">Music</a></li>
<li><a href="https://www.vigeos.net/videos/category/150">News</a></li>
<li><a href="https://www.vigeos.net/videos/category/155">Pets & Animals</a></li>
<li><a href="https://www.vigeos.net/videos/category/160">Sad</a></li>
<li><a href="https://www.vigeos.net/videos/category/170">Science</a></li>
<li><a href="https://www.vigeos.net/videos/category/180">Sports</a></li>
<li><a href="https://www.vigeos.net/videos/category/190">Technology</a></li>
<li><a href="https://www.vigeos.net/videos/category/195">Weird</a></li>
<li><a href="https://www.vigeos.net/videos/category/200">Wow</a></li>
</ul>

</ul>
</div>
</div>

 

Now at the bottom of this file add this

<script type="text/javascript">
$(document).ready(function () {

$(".menu-btn a").click(function () {
$(".overlay").fadeToggle(200);
$(this).toggleClass('btn-open').toggleClass('btn-close');
});

$('.overlay').on('click', function () {
$(".overlay").fadeToggle(200);
$(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close');
});

$('.menu a').on('click', function () {
$(".overlay").fadeToggle(200);
$(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close');
});

});
</script>

 

Save that file and navigate to \themes\default\css\style.css and add this to the bottom

 

/* Mobile Hamburger Menu */
.overlay {
position: fixed;
top: 0;
z-index: 99;
display: none;
overflow: auto;
width: 100%;
height: 100%;
background: #212121;
}

.overlay .menu {
margin: 10% auto;
width: 80%;
}

.overlay .menu ul {
margin: 0;
padding: 0;
width: 100%;
}

.overlay .menu ul li {
float: left;
padding: 20px 0;
width: 25%;
list-style: none;
text-align: center;
text-transform: uppercase;
}

.overlay .menu ul li a {
color: #34B484;
font-weight: bold;
font-size: 20px;
}

.overlay .menu ul ul {
margin-top: 50px;
}

.overlay .menu ul ul li {
position: relative;
float: none;
margin: 0;
width: 100%;
border: 0;
}

.overlay .menu ul ul li a {
color: #fff !important;
text-transform: capitalize;
font-weight: bold;
font-size: 14px;
}

.overlay .menu ul ul li a:hover {
color: #34b484;
}

/* Mobile Hamburger Menu Responsive */
@media screen and (max-width: 768px) {
.overlay .menu ul li {
float: none;
margin-bottom: 50px;
width: 100%;
border-bottom: 1px solid #575757;
}
.overlay .menu ul li:last-child {
border: 0;
}
.overlay .menu ul ul {
margin-top: 20px;
}
}

 

Now you are done! 🙂

Ctrl + Click the refresh button on your website to clear the site cache, and you should see the menu on mobile.

This topic was modified 12 months  ago 6 times by Disquy

ReplyQuote
IvanDG
(@ivandg)
New Member
Joined: 11 months  ago
Posts: 1
November 21, 2018 7:21 am  

Hello

There is that line where you say 

Above add this code, you will need to add the links you want to show.

I did not understand exactly where above did you mean. Do you mean to add the code at the beginning or at the end or inside if this code;

<?php } ?>

<?php if (IS_LOGGED): ?>
<script>


ReplyQuote
Disquy
(@disquy)
Member Admin
Joined: 2 years  ago
Posts: 88
November 21, 2018 7:26 am  

Above

<?php } ?>

ReplyQuote
Share: