A Simple Mobile Menu

I have created a simple mobile menu using html, javascript(jquery) and css. I have used similar mobile menu for couple of websites.

Below is how I created the menu. You can also edit and play with the code here https://jsfiddle.net/mannemvamsi/j9m571ve/

1. HTML for the menu(Navigation)

<div class="mobile-menu-wrapper">
    <div class="mobile-menu-control">
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
    </div>
<div class="mobile-menu">
    <ul>
        <li ><a href="#"><div class="header item-height" ><strong>The Main 1</strong></div></a>
            <ul>
                <li><a href="#"><div class="item-height">Sub Item</div></a></li>
                <li><a href="#"><div class="item-height">Sub Item</div></a></li>
            </ul>
        </li>
        <li ><a href="#"><div class="header" ><strong>The Main 2</strong></div></a>
            <ul>
                <li><a href="#"><div class="item-height">Sub Item</div></a></li>
                <li><a href="#"><div class="item-height">Sub Item</div></a></li>
            </ul>
        </li>
    </ul>
</div>
</div>

2. Add CSS to the html document( basically adding css only to above navigation part)

.mobile-menu-wrapper{
    position:fixed;
    left:-220px;
    width:260px;
    cursor:pointer;
}

div.mobile-menu {
    width:210px;
   
    float:left;
    background-color:#222;
}
.mobile-menu ul {
    list-style:none;
    margin:0;
    padding:0px;
   
}
.mobile-menu ul ul li {
    padding-left:8px;
   
}
.mobile-menu li {
    margin:0;
    padding:0;
}
.mobile-menu li, .mobile-menu li a {
    color:#fff;
    font-family:calibri, sans-serif;
    text-decoration:none;
}
.mobile-menu li li:hover {
    background-color:#111;
}
.mobile-menu .item-height{
    padding:10px 2px;
}

.mobile-menu-control {
    float:right;
    //border:1px solid green;
    cursor:pointer;
    background-color:#222;
    padding:5px;
}
.mobile-menu-control .bar {
    width:25px;
    margin:4px 0;
    border:2px solid #fdbd12;
}
.mobile-menu .header {
    color:#fdbd12;
    padding-left:4px;
    width:100%;
}

3. Use Jquery for actions

$(function() {
    var wrapper = $(".mobile-menu-wrapper");
    var mobileMenu = $(".mobile-menu");
    var mobileMenuWidth = mobileMenu.width();
    $(".mobile-menu-control").bind("click",function() {
       
        if(mobileMenu.hasClass("opened-menu")) {
           
           $(".mobile-menu-wrapper").animate({
               left:-(220)
              
           });
            mobileMenu.removeClass('opened-menu');
        }
        else
        {
           $(".mobile-menu-wrapper").animate({
               left:0
           });
            mobileMenu.addClass('opened-menu');
        }
    });
})

Fiddle is available for the same here : https://jsfiddle.net/mannemvamsi/j9m571ve/

How to edit wordpress theme or change styles

Editing wordpress theme is a simple task. But before doing that I would recommend have little bit idea about PHP, HTML and CSS.

Assuming you know at least HTML and CSS, first install a plugin called wpide. Though it is outdated, I often use this one for every site that install. This helps me to edit the site quick or to make changes pretty fast.

Lets work on a simple example:
    Installed 2015 wordpress theme. Increase the default site title font-size.

Step 1: Checking the existing styles :

Open your site in your browser, after opening the site, press ctrl+shift+I .

Press the inspect icon(looks like search icon), and inspect the title .. you will see element styles 

1. select the device on which platform you want to test. In our case I selected Laptop.

2. Title we want to modify

3. Elements section shows the element we have selected

4. Styles shows the styles of the element we have selected. 

So, at moment we do not have any styles to the site title. Note that the site title(h1) has classname as site-title.

STEP 2: Adding the styles :

Lets add couple of style properties to the site-title in our style.css file. 

open your wordpress admin panel and also wpide screen. It should look like below

Select your theme and you should see style.css file 

Add the below style to that file 

.site-title {
   font-size:45px;
}

Or you can edit in your chrome dev tool.. just click on the element style and add that style property to see the changes instantly.
But since we have added that style in our stylesheet file, I am not doing that.

So, the result of our style will increase the font-size of the title.
Below is the result.