Poll: What do you think of this idea?
It's a great idea!
Good idea, bad implementation.
I don't care either way.
I hate it.
[Show Results]
Note: This is a public poll, other users will be able to see what you voted for.
[GoMobile Mod] Mobile Navigation Update
Post Reply
 
Thread Rating:
  • 0 Votes - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
30-04-2014, 09:01 PM (This post was last modified: 01-05-2014 10:10 AM by Im_Ryan.)
[GoMobile Mod] Mobile Navigation Update
Well I got bored and decided to make a MyBB forum. I decided to update the GoMobile plugin a little bit, and came up with a decent little mobile navigation button. Basically if you slide your finger (or cursor) right over the header then a hidden menu comes out, or you can click the button. It's not exactly what I'm looking for, I'm going to try and make a two-sided one for my site, but I thought it would make a nice little mod for this forum (if you guys want).

Screenshots:
[Image: Screenshot_2014-04-30-19-19-22.png]

[Image: Screenshot_2014-04-30-19-19-27.png]
Tutorial (code mumbo-jumbo for admins):
I got most of the menu code from here, and they have other types of menus as well that are worth taking a look at. For my quick tutorial I'll be using the "Always Off Canvas" example.

1. Go to Templates & Styles -> Templates -> MyBB GoMobile -> Ungrouped Templates -> headerinclude and replace your prototype.js script with this:
Code:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://responsivenavigation.net/assets/js/jquery.hammer.min.js"></script>

2. Make a new JavaScript file on your computer and name it menuScript.js, fill it with the following code and upload it to your jscripts/ directory:
Code:
jQuery.noConflict();

jQuery(document).ready(function($) {
    function openMenu() {
        $("body").addClass('nav-expanded');
    }
    
    function closeMenu() {
        $("body").removeClass('nav-expanded');
    }
    
    $('.example-header').hammer().on('dragleft', function(e) {
        openMenu();
    });
    
    $('.example-header').hammer().on('dragright', function(e) {
        closeMenu();
    });
    
    $('.eoffcanvas').hammer().on('dragright', function(e) {
        closeMenu();
    });
    
    $('.nav-toggle').on('click', function(e) {
        e.stopPropagation();
        e.preventDefault();
        
        $('body').toggleClass('nav-expanded');
    });
});

3. Go to Templates & Styles -> Templates -> MyBB GoMobile -> Header Templates -> header and replace ALL with this (or look for my corrections):
Code:
<a name="top" id="top"></a>
    <div id="header">
        <div id="panel">
            {$welcomeblock}
        </div>
                <div id="logo">
            <div class="example-header">
                <a class="e-logo" href="#">{$mybb->settings['gomobile_mobile_name']}</a>
                              <div class="nav-toggle">
                                    <img src="images/mobile/button_menu.png" alt="Menu" />
                </div>
            </div>
                </div>
                <div id="menu">
                    <a href="{$mybb->settings['bburl']}/search.php?action=getnew">{$lang->welcome_newposts}</a>
                        <a href="{$mybb->settings['bburl']}/misc.php?action=getdaily">{$lang->welcome_todaysposts}</a>                    
                        <a class="menu_link" href="{$mybb->settings['bburl']}/search.php">{$lang->toplinks_search}</a>
                </div>
                <div class="eoffcanvas">
                     <div class="scrolling">
                        <ul>
                                    <li><h2 class="title">Menu</h2></li>
                                        <li><a class="menu_link" href="{$mybb->settings['bburl']}/index.php">Home</a></li>
                            <li><a class="menu_link" href="{$mybb->settings['bburl']}/forums.php">Forums</a></li>                                        
                        <li><a class="menu_link" href="{$mybb->settings['bburl']}/memberlist.php">Members</a></li>
                        <li><a class="menu_link" href="{$mybb->settings['bburl']}/calendar.php">{$lang->toplinks_calendar}</a></li>
                        </ul>
                    </div>
            </div>
    </div>

        <script type="text/javascript" src="jscripts/menuScript.js"></script>

    <navigation>
    <div id="container">
            {$pm_notice}
            {$bannedwarning}
            {$bbclosedwarning}
            {$unreadreports}

4. Go to Templates & Styles -> Themes -> MyBB GoMobile -> global.css and add the following:
Code:
body {
    position: relative;
    -webkit-transition: margin .3s ease,-webkit-transform .3s ease;
    -moz-transition: margin .3s ease,-moz-transform .3s ease;
    -o-transition: margin .3s ease,transform .3s ease;
    -ms-transition: margin .3s ease,transform .3s ease;
    transition: margin .3s ease,transform .3s ease;
    width: 100%;
}

body.nav-expanded {
    margin-left: -280px;
}

.eoffcanvas {
    position: fixed;
    top: 0;
    width: 280px;
    height: 100%;
    z-index: 30;
    overflow: hidden;
    box-shadow: inset 4px 0px 10px rgba(0, 0, 0, 0.2);
    right:-280px;
    -webkit-transition: right .3s ease,-webkit-transform .3s ease;
    -moz-transition: right .3s ease,-moz-transform .3s ease;
    -o-transition: right .3s ease,transform .3s ease;
    -ms-transition: right .3s ease,transform .3s ease;
    transition: right .3s ease,transform .3s ease;
    background-color: #262626;
}

.nav-expanded .eoffcanvas {
    right:0;
}

.example-header {
    width: 100%;
    position: relative;
    margin: 10px 0 10px 0;
}

.e-logo {
    float: center;
    margin: 0;
}

.nav-toggle {
    display: inline-block;
    float: right;
}

.nav-toggle:hover {
    color: #999;
}

.eoffcanvas ul {
    margin: 40px 0 0 0;
    padding: 0;
}

.eoffcanvas .ul li {
    margin: 0;
    display: block;
    width: 100%;
}

.title {
    font-size: 2em;
    color: #FFF;
}

.eoffcanvas .menu_link {
    border-bottom: 1px solid #f4f4f4;
    padding: 15px 0 15px 0;
    font-size: 1.5em;
    width: 100%;
    display: block;
    color: #FFF;
}
**Of course you can style this however you want.

I also have a bunch of other mods I have/will be implementing on my site. For example, check out the profile page. If you want any of these, feel free to ask and I'll share (they're all off mybb or google anyways) Smile
Please note that this can add a menu (like from your home site so we can switch back and forth), replace your .panel, .menu or whatever else. You don't need to use the image I provided, you can make it out of css or find your own image. This is an easy enough mod that I will also be uploading to mybb.com here soon enough. Any questions/comments/concerns or if I missed something, feel free to ask or PM me. This is the site I'm building right now, if you want a live preview (not sure how long I'll be keeping it up though). Live preview is no longer available. Working on a new navbar.

PS: Don't judge my site, it's a work in progress and I haven't done much theming Angry
(also, I'm not advertising it, since there's nothing to advertise, it's just something I made for fun based off a gaming forum)

PSS to admins: Now that I think about it, a menu would be nice for the desktop version as well. This would be an even simpler mod; one that I can show you or you guys can look up for yourselves (would only require a header edit in your current theme's template.


Attached File(s)
.png  button_menu.png (Size: 615 bytes / Downloads: 137)

Atir aissom atir imon
Find all posts by this user
Like Post Quote this message in a reply
30-04-2014, 09:30 PM
RE: [GoMobile Mod] Mobile Navigation Update
Its nice man. This is what you were talking about xbox. I like it. How would it work on a kindle fire?

[Image: Guilmon-41189.gif] ♪僕は恐怖の一定した状態に住んで、不幸、逃すもう?僕は、それはもう痛いときも気づかないと
Find all posts by this user
Like Post Quote this message in a reply
30-04-2014, 09:46 PM (This post was last modified: 30-04-2014 09:53 PM by Im_Ryan.)
RE: [GoMobile Mod] Mobile Navigation Update
(30-04-2014 09:30 PM)ThePaleolithicFreethinker Wrote:  Its nice man. This is what you were talking about xbox. I like it. How would it work on a kindle fire?

Yes this is what I was talking about. Though I'm not sure how it'll work on a kindle, I'm assuming the same way. I don't have one so you'll have to test it out for me Tongue

Atir aissom atir imon
Find all posts by this user
Like Post Quote this message in a reply
02-05-2014, 07:16 AM
RE: [GoMobile Mod] Mobile Navigation Update
No feedback? Sadcryface

But I wants a menu for easier navigation Sadcryface2

Atir aissom atir imon
Find all posts by this user
Like Post Quote this message in a reply
02-05-2014, 10:11 AM
RE: [GoMobile Mod] Mobile Navigation Update
(02-05-2014 07:16 AM)Im_Ryan Wrote:  No feedback? Sadcryface

But I wants a menu for easier navigation Sadcryface2

Sure, I can implement it!

Sleep comes first...

“Forget Jesus, the stars died so you could be born.” - Lawrence M. Krauss
Find all posts by this user
Like Post Quote this message in a reply
[+] 1 user Likes DeepThought's post
02-05-2014, 10:14 AM
RE: [GoMobile Mod] Mobile Navigation Update
(02-05-2014 10:11 AM)DeepThought Wrote:  
(02-05-2014 07:16 AM)Im_Ryan Wrote:  No feedback? Sadcryface

But I wants a menu for easier navigation Sadcryface2

Sure, I can implement it!

Sleep comes first...

Oh no problem, I just wasn't getting any feedback and I was like da hell Sadcryface

When I get a better version of this working would you want an update? If all goes as planned it'll have a left side menu for site links, a right side menu for profile links (along with your picture) and the header will stay on page.

Then if I get that working, I have a few other tweaks in mind Big Grin

Atir aissom atir imon
Find all posts by this user
Like Post Quote this message in a reply
02-05-2014, 10:19 AM
RE: [GoMobile Mod] Mobile Navigation Update
Just tested the registration.
The image for the text you have to enter to make sure you're not a spambot is broken.

[Image: v0jpzpT.png]
Find all posts by this user
Like Post Quote this message in a reply
02-05-2014, 10:29 AM
RE: [GoMobile Mod] Mobile Navigation Update
(02-05-2014 10:19 AM)Alex_Leonardo Wrote:  Just tested the registration.
The image for the text you have to enter to make sure you're not a spambot is broken.

Probably. Like I said, this is a brand new website I just started over the weekend, and this is just for fun so I'm not working on it 24/7. I haven't checked everything out yet. Basically this wouldn't even be considered an Alpha version.
All I have done so far is:
  • Install a few necessary plugins like GoMobile, page manager and a shoutbox
  • Add a portal [untouched]
  • Add mock categories/forums/test posts
  • Add a theme [untouched]
  • Implement some template mods [have a ton left]
I am currently working on a new GoMobile navbar, and my list to do is too long to even try and post. I haven't tested any features of the site except for the ones I'm customizing.

Plus, you couldn't register if you wanted to. It's on admin permission only Tongue

Atir aissom atir imon
Find all posts by this user
Like Post Quote this message in a reply
02-05-2014, 10:43 AM
RE: [GoMobile Mod] Mobile Navigation Update
(02-05-2014 10:29 AM)Im_Ryan Wrote:  
(02-05-2014 10:19 AM)Alex_Leonardo Wrote:  Just tested the registration.
The image for the text you have to enter to make sure you're not a spambot is broken.

Probably. Like I said, this is a brand new website I just started over the weekend, and this is just for fun so I'm not working on it 24/7. I haven't checked everything out yet. Basically this wouldn't even be considered an Alpha version.
All I have done so far is:
  • Install a few necessary plugins like GoMobile, page manager and a shoutbox
  • Add a portal [untouched]
  • Add mock categories/forums/test posts
  • Add a theme [untouched]
  • Implement some template mods [have a ton left]
I am currently working on a new GoMobile navbar, and my list to do is too long to even try and post. I haven't tested any features of the site except for the ones I'm customizing.

Plus, you couldn't register if you wanted to. It's on admin permission only Tongue
I just was saying that for constructive crit.

[Image: v0jpzpT.png]
Find all posts by this user
Like Post Quote this message in a reply
02-05-2014, 10:44 AM
RE: [GoMobile Mod] Mobile Navigation Update
(02-05-2014 10:43 AM)Alex_Leonardo Wrote:  
(02-05-2014 10:29 AM)Im_Ryan Wrote:  Probably. Like I said, this is a brand new website I just started over the weekend, and this is just for fun so I'm not working on it 24/7. I haven't checked everything out yet. Basically this wouldn't even be considered an Alpha version.
All I have done so far is:
  • Install a few necessary plugins like GoMobile, page manager and a shoutbox
  • Add a portal [untouched]
  • Add mock categories/forums/test posts
  • Add a theme [untouched]
  • Implement some template mods [have a ton left]
I am currently working on a new GoMobile navbar, and my list to do is too long to even try and post. I haven't tested any features of the site except for the ones I'm customizing.

Plus, you couldn't register if you wanted to. It's on admin permission only Tongue
I just was saying that for constructive crit.

Fair enough. I'll check it out and/or add it to my to-do list lol

Atir aissom atir imon
Find all posts by this user
Like Post Quote this message in a reply
Post Reply
Forum Jump: