Código JavascriptAjusto la pregunta agregando el código:
$('.botoneraMain > .k-menu-scroll-wrapper').prepend('');
$('.botoneraMain > .k-menu-scroll-wrapper').prepend('');
$('.botoneraMain > .k-menu-scroll-wrapper').prepend('<label for="check" class="checkbtn"><i class="fa fa-bars"></i></label>');
$('.botoneraMain > .k-menu-scroll-wrapper').prepend('<input type="checkbox" id="check">');
.wrap-menu-extended {
width: 100%;
}
.checkbtn {
font-size: 25px !important;
color: white;
float: right;
line-height: 40px !important;
margin-left: -30px;
margin-right: 18px;
cursor: pointer;
display: none;
background-color: #92b711;
padding: 0rem 0.8rem;
border-radius: 4px;
}
#check{
display: none;
}
@media (max-width: 952px){
.cabeceraMain .k-menu-horizontal li span{
font-size: 16px;
}
}
@media (max-width: 952px){
.k-menu-scroll-wrapper{
width: 100% !important;
}
}
@media (max-width: 952px){
.k-menu-scroll-button{
display: none !important;
}
}
@media (max-width: 952px){
.loginMain{
margin-right: 18px;
}
}
@media (max-width: 952px){
.logoMain .header-logo{
margin-top: 0;
margin-left: -88px;
}
}
@media (min-width: 952px){
.k-menu-scroll-wrapper{
width: 100% !important;
margin-left: 116px;
}
}
@media (max-width: 575.98px){
.checkbtn {
margin-right: 5px !important;
}
}
@media (max-width: 858px){
.checkbtn{
display: block;
float: right;
margin-right: -102px;
}
.k-menu-horizontal{
display: block;
position: fixed;
width: 100%;
height: auto;
background: #2c3e50;
top: -80px;
left: 0;
text-align: center;
transition: all .5s;
}
.cabeceraMain .k-menu-horizontal li{
display: block;
margin: 14px 0 !important;
line-height: 30px;
margin-right: 20px;
}
.cabeceraMain .k-menu-horizontal li span{
font-size: 20px;
justify-content: center;
}
#check:checked ~ .k-menu-horizontal {
display: block;
width: 100% !important;
max-height: 50%;
margin-top: 0px;
top: 80px;
left: 0px !important;
background-color: #fffcfa;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/prueba.css" charset="UTF-8" type="text/css">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<title>Document</title>
</head>
<body>
<script type="text/javascript" src="./js/prueba.js"></script>
<div class="botoneraMain" id="divMenuContent">
<div class="k-menu-scroll-wrapper horizontal" style="width: 204px;">
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<i class="fa fa-bars"></i>
</label>
<ul id="menu" data-role="menu" class="k-widget k-reset k-menu k-menu-horizontal" aria-orientation="horizontal" tabindex="0" role="menubar" style="width: 204px;">
<li>
<span class="k-link k-menu-link">Uno</span>
</li>
<li>
<span class="k-link k-menu-link">Dos</span>
</li>
<li>
<span class="k-link k-menu-link">Tres</span>
</li>
</ul>
</div>
</div>
</body>
</html>