Hello Team,
I want Rad Menu to behave responsive for my asp.net application.
Please find code below :
<div class="container">
<button class="toggle" type="button">Toggle menu</button>
<div class="popup">
<telerik:RadMenu runat="server" RenderMode="Lightweight">
<Items>
<telerik:RadMenuItem Text="File">
<Items>
<telerik:RadMenuItem Text="New" />
<telerik:RadMenuItem Text="Open" />
<telerik:RadMenuItem IsSeparator="True" />
<telerik:RadMenuItem Text="Save" />
<telerik:RadMenuItem Text="Save As" />
<telerik:RadMenuItem IsSeparator="True" />
<telerik:RadMenuItem Text="Print Preview" />
<telerik:RadMenuItem Text="Print" />
<telerik:RadMenuItem IsSeparator="True" />
<telerik:RadMenuItem Text="Close" />
</Items>
</telerik:RadMenuItem>
<telerik:RadMenuItem Text="Edit">
<Items>
<telerik:RadMenuItem Text="Undo" />
<telerik:RadMenuItem IsSeparator="True" />
<telerik:RadMenuItem Text="Cut" />
<telerik:RadMenuItem Text="Copy" />
<telerik:RadMenuItem Text="Paste" />
<telerik:RadMenuItem Text="Clipboard..." />
<telerik:RadMenuItem IsSeparator="True" />
</Items>
</telerik:RadMenuItem>
<telerik:RadMenuItem Text="Insert">
<Items>
<telerik:RadMenuItem Text="Break..." />
<telerik:RadMenuItem Text="Page Numbers..." />
<telerik:RadMenuItem Text="Date and Time..." />
<telerik:RadMenuItem Text="Field..." />
<telerik:RadMenuItem Text="Symbol..." />
<telerik:RadMenuItem Text="Comment" />
<telerik:RadMenuItem IsSeparator="True" />
<telerik:RadMenuItem Text="Picture" />
<telerik:RadMenuItem Text="Diagram" />
<telerik:RadMenuItem Text="Text Box" />
<telerik:RadMenuItem Text="Hyperlink" />
</Items>
</telerik:RadMenuItem>
</Items>
</telerik:RadMenu>
</div>
</div>
Script:
<script type="text/javascript">
Sys.Application.add_load(function () {
var $ = $telerik.$,
mqTest = document.getElementById("mqTest");
$("link.append").appendTo("head");
$(".toggle").bind("click", function () {
$(".popup").toggle();
});
var mq = window.matchMedia("(max-width: 980px)");
mq.addListener(handleWidthChange);
function handleWidthChange(mq) {
if (mq.matches) {
$(".popup").hide();
}
else {
$(".popup").show();
}
}
handleWidthChange(mq);
});
</script>
Css:
.toggle {
display: none;
}
@media only screen and (max-width: 360px) {
.container {
position: relative;
}
.toggle {
display: inline-block;
}
.popup {
position: relative;
left: 0;
top: 100%;
display: none;
}
.RadMenu {
font-size: 16px;
min-width: 40vw;
}
.RadMenu .rmRootGroup {
}
.RadMenu .rmRootGroup > .rmItem {
float: none;
border: 0;
border-bottom: 1px solid #cccccc;
}
.RadMenu .rmRootGroup > .rmLast {
border: 0;
}
.RadMenu .rmRootGroup .rmRootLink {
padding: .5em 1em;
}
.rmSlide {
display: inline-block !important;
padding-left : 154px;
}
}
It behaves too bad on hover effect and Sub Menu item always comes on top instead of inline with its parent item.
Can any one help me out?
Thanks and Regards,
Ruchi Patel
I want Rad Menu to behave responsive for my asp.net application.
Please find code below :
<div class="container">
<button class="toggle" type="button">Toggle menu</button>
<div class="popup">
<telerik:RadMenu runat="server" RenderMode="Lightweight">
<Items>
<telerik:RadMenuItem Text="File">
<Items>
<telerik:RadMenuItem Text="New" />
<telerik:RadMenuItem Text="Open" />
<telerik:RadMenuItem IsSeparator="True" />
<telerik:RadMenuItem Text="Save" />
<telerik:RadMenuItem Text="Save As" />
<telerik:RadMenuItem IsSeparator="True" />
<telerik:RadMenuItem Text="Print Preview" />
<telerik:RadMenuItem Text="Print" />
<telerik:RadMenuItem IsSeparator="True" />
<telerik:RadMenuItem Text="Close" />
</Items>
</telerik:RadMenuItem>
<telerik:RadMenuItem Text="Edit">
<Items>
<telerik:RadMenuItem Text="Undo" />
<telerik:RadMenuItem IsSeparator="True" />
<telerik:RadMenuItem Text="Cut" />
<telerik:RadMenuItem Text="Copy" />
<telerik:RadMenuItem Text="Paste" />
<telerik:RadMenuItem Text="Clipboard..." />
<telerik:RadMenuItem IsSeparator="True" />
</Items>
</telerik:RadMenuItem>
<telerik:RadMenuItem Text="Insert">
<Items>
<telerik:RadMenuItem Text="Break..." />
<telerik:RadMenuItem Text="Page Numbers..." />
<telerik:RadMenuItem Text="Date and Time..." />
<telerik:RadMenuItem Text="Field..." />
<telerik:RadMenuItem Text="Symbol..." />
<telerik:RadMenuItem Text="Comment" />
<telerik:RadMenuItem IsSeparator="True" />
<telerik:RadMenuItem Text="Picture" />
<telerik:RadMenuItem Text="Diagram" />
<telerik:RadMenuItem Text="Text Box" />
<telerik:RadMenuItem Text="Hyperlink" />
</Items>
</telerik:RadMenuItem>
</Items>
</telerik:RadMenu>
</div>
</div>
Script:
<script type="text/javascript">
Sys.Application.add_load(function () {
var $ = $telerik.$,
mqTest = document.getElementById("mqTest");
$("link.append").appendTo("head");
$(".toggle").bind("click", function () {
$(".popup").toggle();
});
var mq = window.matchMedia("(max-width: 980px)");
mq.addListener(handleWidthChange);
function handleWidthChange(mq) {
if (mq.matches) {
$(".popup").hide();
}
else {
$(".popup").show();
}
}
handleWidthChange(mq);
});
</script>
Css:
.toggle {
display: none;
}
@media only screen and (max-width: 360px) {
.container {
position: relative;
}
.toggle {
display: inline-block;
}
.popup {
position: relative;
left: 0;
top: 100%;
display: none;
}
.RadMenu {
font-size: 16px;
min-width: 40vw;
}
.RadMenu .rmRootGroup {
}
.RadMenu .rmRootGroup > .rmItem {
float: none;
border: 0;
border-bottom: 1px solid #cccccc;
}
.RadMenu .rmRootGroup > .rmLast {
border: 0;
}
.RadMenu .rmRootGroup .rmRootLink {
padding: .5em 1em;
}
.rmSlide {
display: inline-block !important;
padding-left : 154px;
}
}
It behaves too bad on hover effect and Sub Menu item always comes on top instead of inline with its parent item.
Can any one help me out?
Thanks and Regards,
Ruchi Patel