Youtube Menu

Navigation
-1

I'm trying to make a menu like youtube, the menu itself is already done, I just can not create the javascript part.

When the menu is active, the content is on the menu side and smaller, and when it is turned off, the content becomes the size of the page.

And in mobile the menu overlays all content. Doubt look at www.youtube.com 

        #col {
        width: 100%;
        padding: 13px 0 !important;
        border-bottom: 1px solid rgba(200, 200, 200, .2);
        height: auto;
        display: flex;
        -webkit-flex-direction: column;
        -moz-flex-direction: column;
        -ms-flex-direction: column;
        -o-flex-direction: column;
        flex-direction: column;
        align-items: center;
        padding: 0;
    }
    div.dark-menu {
        display: none;
        position: absolute;
        height: 100%;
        width: 100%;
        z-index: 2030;
        background: rgba(0, 0, 0, .6);
    }

    /* MENU */
    div#menu {
        display: flex;
        z-index: 2040;
    }
    nav#menu-side {
        position: fixed;
        width: 240px;
        height: 100%;
        display: flex;
        -webkit-flex-direction: column;
        -moz-flex-direction: column;
        -ms-flex-direction: column;
        -o-flex-direction: column;
        flex-direction: column;
        background: #1e1e1e;
        z-index: 2010;
        overflow: hidden; 
        top: 56px;
    }
    div.menu-container {
        box-sizing: border-box;
        width: 100%;
        height: 100%; 
    }

    /* TOPO DO MENU EM DESKTOP */
    div.topo-menu {
        width: 100%;
        height: 56px;
        display: none;
        -webkit-flex-direction: row;
        -moz-flex-direction: row;
        -ms-flex-direction: row;
        -o-flex-direction: row;
        flex-direction: row;
        align-items: center;
        border-bottom: 1px solid rgba(200, 200, 200, 0.2); 
    }
    div.menu-icon {
        display: flex;
        margin: 0 5px 0 0;
        width: 40px;
        height: 40px;
        padding: 8px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        border-radius: 50%;
        -webkit-transition: all 0.4s linear;
        -moz-transition: all 0.4s linear;
        -ms-transition: all 0.4s linear;
        -o-transition: all 0.4s linear;
        transition: all 0.4s linear; 
    }
    div.menu-icon:hover {
        background: #666; 
    }
    button#button-icon {
        vertical-align: middle;
        background: none;
        border: none;
        color: #FFF;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        line-height: 0;
        cursor: pointer;
        outline: none; 
    }
    div.icone {
        width: 24px;
        height: 24px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative; 
    }
     div.icone svg {
        display: block;
        fill: #FFF; 
    }
    /* END TOPO DO MENU EM DESKTOP */


    /* CONTEUDO DO MENU */
    div.menu-content {
        width: 100%;
        height: 92%;
        overflow-y: scroll; 
        overflow-x: hidden
    }
    div.menu-content::-webkit-scrollbar {
        display: none; 
    }
    div.menu-content::-webkit-scrollbar-button {
        display: none; 
    }
    div.menu-content::-webkit-scrollbar-thumb {
        background: #444;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
        border-radius: 10px; 
    }
    div.menu-content:hover::-webkit-scrollbar {
        background: transparent;
        width: 10px;
        display: block; 
    }
    div.itens {
        width: 100%;
        height: 100%; 
    }
    div.itens h3.title-itens {
        display: block;
        margin: 0;
        padding: 0 24px;
        padding-bottom: 10px;
        text-transform: uppercase; 
    }
    div.itens h3.title-itens div.title-formated a.categorias {
        font-size: 1.4rem;
        font-weight: 500;
        letter-spacing: 0.007px;
        color: #777; 
    }
    div.itens h3.title-itens div.title-formated a.categorias:hover {
        color: #FFF;
        text-decoration: none; 
    }

    div.itens a.list-itens {
        display: flex;
        align-items: center;
        padding: 12px 24px;
        font-size: 12pt;
        color: #FFF;
        -webkit-transition: all 0.2s linear;
        -moz-transition: all 0.2s linear;
        -ms-transition: all 0.2s linear;
        -o-transition: all 0.2s linear;
        transition: all 0.2s linear; 
    }
    div.itens a.list-itens:hover {
        background: #444;
        text-decoration: none; 
    }
    div.itens a.list-itens:hover div.text {
        color: #FFF; 
    }
    div.itens a.list-itens div.icone {
        display: flex;
        margin-right: 27px;
        color: #AAA; 
    }
    div.itens a.list-itens div.text {
        color: #DDD;
        font-weight: 500;
        font-size: 1.4rem; 
    }
    nav#menu-side div.menu-content div.footer-mn {
        text-align: center;
        color: #FFF;
        font-size: 9pt;
        width: 231px;
    }
    nav#menu-side div.menu-content div.footer-mn label {
        font-weight: 500;
    }
    /* CONTEUDO DO MENU */

    /* END MENU */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><!--LatestcompiledandminifiedCSS--><linkrel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div id="menu">
    <!-- TELA QUE IRÀ SOBREPOR O CONTEUDO EM MOBILE -->
	<div class="dark-menu"></div>
    <!-- / -->
    
    <nav id="menu-side">
        <div class="menu-container">
            <div class="col-md-2 topo-menu" id="top">
                <div class="menu-icon">
                    <button type="button" id="button-icon" class="toggle-mb" aria-label="Guia" data-toggle="tooltip" data-placement="bottom" title="Menu" data-element="#menu">
                        <div class="icone">
                            LOGO
                        </div>
                    </a>
                </div>
            </div>

            <!-- CONTEÚDO DO MENU -->
            <div class="menu-content">

                <!-- HEADER MENU (Irá aparecer só no mobile) -->
                <div class="col-md-2 header-menu" id="col">
                    <div class="itens">
                        <a href="" title="Início" class="list-itens">
                            <div class="icone">
                                <span class="glyphicon glyphicon-home"></span>
                            </div>
                            <div class="text">
                                <span>Início</span>
                            </div>
                        </a>
                    </div>

                    <div class="itens">
                        <a href="" title="Mais Vistos" class="list-itens">
                            <div class="icone">
                                <span class="glyphicon glyphicon-fire"></span>
                            </div>
                            <div class="text">
                                <span>Mais Vistos</span>
                            </div>
                        </a>
                    </div>

                    <div class="itens">
                        <a href="" title="Início" class="list-itens">
                            <div class="icone">
                                <span class="glyphicon glyphicon-home"></span>
                            </div>
                            <div class="text">
                                <span>Início</span>
                            </div>
                        </a>
                    </div>
                </div>
                <!-- END HEADER MENU -->

                <!-- FILMES -->
                <div class="col-md-2 filmes-menu" id="col">
                    <div class="itens">
                        <h3 class="title-itens">
                            <div class="title-formated">
                                <a href="" class="categorias" title="Filmes" data-toggle="tooltip" data-placement="top">
                                    Filmes
                                </a>
                            </div>
                        </h3>
                        <a href="" title="" class="list-itens">
                            <div class="icone">
                                <span class="glyphicon glyphicon-film"></span>
                            </div>
                            <div class="text">
                                <span>Filmes</span>
                            </div>
                        </a>
                    </div>
                </div>
                <!-- END FILMES -->

                <!-- SÉRIES -->
                <div class="col-md-2 series-menu" id="col">
                    <div class="itens">
                        <h3 class="title-itens">
                            <div class="title-formated">
                                <a href="" class="categorias" title="Séries" data-toggle="tooltip" data-placement="top">
                                    Séries
                                </a>
                            </div>
                        </h3>
                        <a href="" title="" class="list-itens">
                            <div class="icone">
                                <span class="glyphicon glyphicon-list"></span>
                            </div>
                            <div class="text">
                                <span>Séries</span>
                            </div>
                        </a>
                    </div>
                </div>
                <!-- END SÉRIES -->

                <!-- ANIMES -->
                <div class="col-md-2 animes-menu" id="col">
                    <div class="itens">
                        <h3 class="title-itens">
                            <div class="title-formated">
                                <a href="" class="categorias" title="Animes" data-toggle="tooltip" data-placement="top">
                                    Animes
                                </a>
                            </div>
                        </h3>
                        <a href="" title="" class="list-itens">
                            <div class="icone">
                                <span class="glyphicon glyphicon-list"></span>
                            </div>
                            <div class="text">
                                <span>Animes</span>
                            </div>
                        </a>
                    </div>
                </div>
                <!-- END SÉRIES -->

                <!-- FOOTER MENU -->
                <div class="col-md-2 footer-menu" id="col" style="margin-bottom: 14px">
                    <div class="itens">

                        <!-- CONFIGURAÇÕES --> 
                        <a href="" title="Configurações" class="list-itens">
                            <div class="icone">
                                <span class="glyphicon glyphicon-cog"></span>
                            </div>
                            <div class="text">
                                <span>Configurações</span>
                            </div>
                        </a>
                        <!-- END CONFIGURAÇÕES -->

                        <!-- AJUDA --> 
                        <a href="" title="Ajuda" class="list-itens">
                            <div class="icone">
                                <span class="glyphicon glyphicon-question-sign"></span>
                            </div>
                            <div class="text">
                                <span>Ajuda</span>
                            </div>
                        </a>
                        <!-- END AJUDA -->

                        <!-- SOBRE --> 
                        <a href="" title="Sobre" class="list-itens">
                            <div class="icone">
                                <span class="glyphicon glyphicon-info-sign"></span>
                            </div>
                            <div class="text">
                                <span>Sobre</span>
                            </div>
                        </a>
                        <!-- END SOBRE -->
                    </div>
                </div>
                <!-- END FOOTER MENU -->

            </div>
        </div>
    </nav>
</div>
    
asked by anonymous 11.05.2018 / 17:50

1 answer

0

Dude I made an example here for you, I think it will suit you as a guide to your code there.

  

1 - You will have to adapt your screen settings to adjust the effect for the menu.

     

2 - The CSS of this example I did based on the resolution of the run here window of the site, simply for you to see the operation. 

$(document).ready(function() {
	
	function Menu() {
		$(".icon").one("click", function() {
			$("#menu-side").animate({
				'transition-duration': '0.3s',
				'transition-timing-function': 'ease-out',
				'margin-left': '-420px'
			})
			$(".icon").attr("class", "icon2");
		});

		$(".icon2").one("click", function() {
			$("#menu-side").animate({
				'transition-duration': '0.3s',
				'transition-timing-function': 'ease-out',
				'margin-left': '-650px'
			})
			$(".icon2").attr("class", "icon");
		});

	};

	addEventListener("click", Menu);

})
.topnav {
    background-color: #000;
    height: 50px;
}

.topnav a {
    float: left;
    display: inline-block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    cursor: pointer;
}
#item #bars {
    color: #fff;
    font-size: 17px;
    cursor: pointer;
}
#tube {
    font-size: 17px;
}

.fa-youtube-play {
    color: red;
}

sup {
    font-size: 10px;
}

input {
    height: 30px;
    width: 500px;
    border: solid 1px #999;
    border-radius: 3px;
    margin-left: 100px;
    margin-top: 10px;
}

#video1 {
    background-color: #DF5A5A;
    width: 200px;
    height: 150px;
    margin-top: 20px;
    margin-left: -200px;
    position: relative;
}

#video2 {
    background-color: #DF5A5A ;
    width: 200px;
    height: 150px;
    margin-top: 5%;
    margin-left: -200px;
    position: absolute;
}

#menu-side {
    margin-left: -500px;
}

.hiden {
    margin-left: -500px;
    transition-duration: 1.5s;
}

@media screen and (max-width: 600px) {
    .topnav a.icon {
        float: left;
        display: inline-block;
    }
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
        position: absolute;
        float: left;
    }
    input {
        display: none;
    } 
}

                       /*------------------------*/

#col {
    width: 100%;
    padding: 13px 0 !important;
    border-bottom: 1px solid rgba(200, 200, 200, .2);
    height: auto;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
    align-items: center;
    padding: 0;
}
div.dark-menu {
    display: none;
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 2030;
    background: rgba(0, 0, 0, .6);
}

/* MENU */
div#menu {
    display: flex;
    z-index: 2040;
}
nav#menu-side {
    position: fixed;
    width: 240px;
    height: 100%;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
    background: #1e1e1e;
    z-index: 2010;
    overflow: hidden; 
    top: 56px;
}
div.menu-container {
    box-sizing: border-box;
    width: 100%;
    height: 100%; 
}

/* TOPO DO MENU EM DESKTOP */
div.topo-menu {
    width: 100%;
    height: 56px;
    display: none;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    -o-flex-direction: row;
    flex-direction: row;
    align-items: center;
    border-bottom: 1px solid rgba(200, 200, 200, 0.2); 
}
div.menu-icon {
    display: flex;
    margin: 0 5px 0 0;
    width: 40px;
    height: 40px;
    padding: 8px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    -webkit-transition: all 0.4s linear;
    -moz-transition: all 0.4s linear;
    -ms-transition: all 0.4s linear;
    -o-transition: all 0.4s linear;
    transition: all 0.4s linear; 
}
div.menu-icon:hover {
    background: #666; 
}
button#button-icon {
    vertical-align: middle;
    background: none;
    border: none;
    color: #FFF;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    line-height: 0;
    cursor: pointer;
    outline: none; 
}
div.icone {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative; 
}
div.icone svg {
    display: block;
    fill: #FFF; 
}
/* END TOPO DO MENU EM DESKTOP */


/* CONTEUDO DO MENU */
div.menu-content {
    width: 100%;
    height: 92%;
    overflow-y: scroll; 
    overflow-x: hidden
}
div.menu-content::-webkit-scrollbar {
    display: none; 
}
div.menu-content::-webkit-scrollbar-button {
    display: none; 
}
div.menu-content::-webkit-scrollbar-thumb {
    background: #444;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px; 
}
div.menu-content:hover::-webkit-scrollbar {
    background: transparent;
    width: 10px;
    display: block; 
}
div.itens {
    width: 100%;
    height: 100%; 
}
div.itens h3.title-itens {
    display: block;
    margin: 0;
    padding: 0 24px;
    padding-bottom: 10px;
    text-transform: uppercase; 
}
div.itens h3.title-itens div.title-formated a.categorias {
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: 0.007px;
    color: #777; 
}
div.itens h3.title-itens div.title-formated a.categorias:hover {
    color: #FFF;
    text-decoration: none; 
}

div.itens a.list-itens {
    display: flex;
    align-items: center;
    padding: 12px 24px;
    font-size: 12pt;
    color: #FFF;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear; 
}
div.itens a.list-itens:hover {
    background: #444;
    text-decoration: none; 
}
div.itens a.list-itens:hover div.text {
    color: #FFF; 
}
div.itens a.list-itens div.icone {
    display: flex;
    margin-right: 27px;
    color: #AAA; 
}
div.itens a.list-itens div.text {
    color: #DDD;
    font-weight: 500;
    font-size: 1.4rem; 
}
nav#menu-side div.menu-content div.footer-mn {
    text-align: center;
    color: #FFF;
    font-size: 9pt;
    width: 231px;
}
nav#menu-side div.menu-content div.footer-mn label {
    font-weight: 500;
}
nav {
    margin-top: -6px;
}
#menu-side {
    margin-left: -800px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><divclass="topnav" id="myTopnav">
        <a class="icon"><i class="fa fa-bars"></i></a>
        <a><i class="fa fa-youtube-play"></i> <b>YouTube</b> <sup>BR</sup></a>
<!--    <input type="search" placeholder="Pesquisar"> -->
    </div>

    <div id="menu">
    <!-- TELA QUE IRÀ SOBREPOR O CONTEUDO EM MOBILE -->
    <div class="dark-menu"></div>
    <!-- / -->

    <div class="container">    
        <nav id="menu-side">
            <div class="menu-container">
            <!--    <div class="col-md-2 topo-menu" id="top">
                    <div class="menu-icon">
                        <button type="button" id="button-icon" class="toggle-mb" aria-label="Guia" data-toggle="tooltip" data-placement="bottom" title="Menu" data-element="#menu">
                            <div class="icone">
                                LOGO
                            </div>
                        </a>
                    </div>
                </div> -->

                <!-- CONTEÚDO DO MENU -->
                <div class="menu-content">

                    <!-- HEADER MENU (Irá aparecer só no mobile) -->
                    <div class="col-md-2 header-menu" id="col">

                        <div class="itens">
                            <a href="" title="Início" class="list-itens">
                                <div class="icone">
                                    <span class="glyphicon glyphicon-home"></span>
                                </div>
                                <div class="text">
                                    <span>Início</span>
                                </div>
                            </a>
                        </div>

                        <div class="itens">
                            <a href="" title="Mais Vistos" class="list-itens">
                                <div class="icone">
                                    <span class="glyphicon glyphicon-fire"></span>
                                </div>
                                <div class="text">
                                    <span>Mais Vistos</span>
                                </div>
                            </a>
                        </div>

                        <div class="itens">
                            <a href="" title="Início" class="list-itens">
                                <div class="icone">
                                    <span class="glyphicon glyphicon-home"></span>
                                </div>
                                <div class="text">
                                    <span>Início</span>
                                </div>
                            </a>
                        </div>
                    </div>
                    <!-- END HEADER MENU -->

                    <!-- FILMES -->
                    <div class="col-md-2 filmes-menu" id="col">
                        <div class="itens">
                            <h3 class="title-itens">
                                <div class="title-formated">
                                    <a href="" class="categorias" title="Filmes" data-toggle="tooltip" data-placement="top">
                                        Filmes
                                    </a>
                                </div>
                            </h3>
                            <a href="" title="" class="list-itens">
                                <div class="icone">
                                    <span class="glyphicon glyphicon-film"></span>
                                </div>
                                <div class="text">
                                    <span>Filmes</span>
                                </div>
                            </a>
                        </div>
                    </div>
                    <!-- END FILMES -->

                    <!-- SÉRIES -->
                    <div class="col-md-2 series-menu" id="col">
                        <div class="itens">
                            <h3 class="title-itens">
                                <div class="title-formated">
                                    <a href="" class="categorias" title="Séries" data-toggle="tooltip" data-placement="top">
                                        Séries
                                    </a>
                                </div>
                            </h3>
                            <a href="" title="" class="list-itens">
                                <div class="icone">
                                    <span class="glyphicon glyphicon-list"></span>
                                </div>
                                <div class="text">
                                    <span>Séries</span>
                                </div>
                            </a>
                        </div>
                    </div>
                    <!-- END SÉRIES -->

                    <!-- ANIMES -->
                    <div class="col-md-2 animes-menu" id="col">
                        <div class="itens">
                            <h3 class="title-itens">
                                <div class="title-formated">
                                    <a href="" class="categorias" title="Animes" data-toggle="tooltip" data-placement="top">
                                        Animes
                                    </a>
                                </div>
                            </h3>
                            <a href="" title="" class="list-itens">
                                <div class="icone">
                                    <span class="glyphicon glyphicon-list"></span>
                                </div>
                                <div class="text">
                                    <span>Animes</span>
                                </div>
                            </a>
                        </div>
                    </div>
                    <!-- END SÉRIES -->

                    <!-- FOOTER MENU -->
                    <div class="col-md-2 footer-menu" id="col" style="margin-bottom: 14px">
                        <div class="itens">

                            <!-- CONFIGURAÇÕES --> 
                            <a href="" title="Configurações" class="list-itens">
                                <div class="icone">
                                    <span class="glyphicon glyphicon-cog"></span>
                                </div>
                                <div class="text">
                                    <span>Configurações</span>
                                </div>
                            </a>
                            <!-- END CONFIGURAÇÕES -->

                            <!-- AJUDA --> 
                            <a href="" title="Ajuda" class="list-itens">
                                <div class="icone">
                                    <span class="glyphicon glyphicon-question-sign"></span>
                                </div>
                                <div class="text">
                                    <span>Ajuda</span>
                                </div>
                            </a>
                            <!-- END AJUDA -->

                            <!-- SOBRE --> 
                            <a href="" title="Sobre" class="list-itens">
                                <div class="icone">
                                    <span class="glyphicon glyphicon-info-sign"></span>
                                </div>
                                <div class="text">
                                    <span>Sobre</span>
                                </div>
                            </a>
                            <!-- END SOBRE -->
                        </div>
                    </div>
                    <!-- END FOOTER MENU -->

                </div>
            </div>
        </nav>
      
         <div id="video1">1</div>
         <div id="video2">2</div>
    
    </div>
    
13.05.2018 / 00:51
Load XML into xrRichText values from a list in Java