PK v1

by VadimMalkov

HTML

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.silver.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.silver.mobile.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>
<div id='app' class='app'>
  <div class='head'>
    <span class='head-login'> 
      
			<span class='head-login-item'>ibm\vsmirnov</span>
      <button class='head-login-item' data-role='button' data-icon='user'></button>
      <button class='head-login-item' data-role='button' data-icon='logout'></button>
    </span>
    <span class='k-icon k-i-html5 head-logo'></span>
    <span class='head-name'>Passport Kit - Project name</span>

  </div>
  <ul id='menu' data-role='menu' data-close-on-click='false'>
    <button data-role='button' data-icon='css' style='float:right;'></button>
    <button data-role='button' data-icon='add' style='float:right;'></button>
  </ul>

  <div class='app-content'>
    <button data-role='button' data-icon='css' style='float:right;'></button>

  </div>
</div>

CSS

body {
  margin: 0px;
}

.app {
  display: inline-block;
  vertical-align: middle;
  width: 100%;
  padding-top: 5px;
}

.head {
  vertical-align: middle;
  display: inline;
  padding: 1px;
  line-height: 40px;
}

.head-login {
  vertical-align: inherit;
  font-size: 16px;
  line-height: 26px;
  float: right;
}

.head-login-item {
  float:left;
}

.head-logo {
  font-size: 26px;
  vertical-align: inherit;
  float: left;
}

.head-name {
  vertical-align: inherit;
  font-size: 16px;
  line-height: 26px;
  float: left;
}

.app-content {
  display: inline-block;
  width: 100%;
}

.k-menu .k-item>.k-link,
.k-menu .k-menu-group .k-item>.k-link {
  padding-top: 3px;
  padding-bottom: 3px;
}

input.k-textbox {
  height: 20px;
}

body .k-button-icon {
  width: 22px;
  line-height: 16px;
  padding: 2px;
  margin: 2px;
}

.k-combobox .k-input{
  height:10px;
  line-height:10px;
}

JavaScript

var model = kendo.observable({
  ds: new kendo.data.DataSource({
    data: [{
      text: "menu1",
      items: [{
        text: "t1"
      }, {
        text: "t1"
      }, {
        text: "t1"
      }]
    }, {
      text: "menu2"
    }, {
      text: "menu3"
    }]
  })
});

kendo.bind($("#app"), model);

var hs = new kendo.data.HierarchicalDataSource({
  data: [{
    text: "menu1",
    items: [{
      text: "t1"
    }, {
      text: "t1"
    }, {
      text: "t1"
    }]
  }, {
    text: "menu2"
  }, {
    text: "menu3"
  }]
});

$("#menu").kendoMenu();