Last post Feb 01, 2017 11:15 AM by ifour.nishith@gmail.com
None
0 Points
2 Posts
Dec 24, 2016 05:00 AM|Assem Shawkat|LINK
Good day,
I am building an Arabic ASP.NET web site.
On the master page, I want the menu items to be aligned from right to left instead of left to right.
How can I do this.
Your help is appreciated.
Thanks/Regards.
Assem Shawkat.
All-Star
45489 Points
7008 Posts
Microsoft
Dec 26, 2016 05:54 AM|Zhi Lv - MSFT|LINK
Hi Assem Shawkat,
Welcome to asp.net forum.
Assem Shawkat On the master page, I want the menu items to be aligned from right to left instead of left to right.
As for this issue, I suggest you could try to use the float Property and refer to the following code:
<style type="text/css"> ul { float:right; list-style:none; } ul li{ float:left; list-style:none; } </style> <div> <ul> <li><a href="#">Item1</a></li> <li><a href="#">Item2</a></li> <li><a href="#">Item3</a></li> <li><a href="#">Item4</a></li> <li><a href="#">Item5</a></li> </ul> </div>
The output as below:
More details about float property, see: http://www.w3schools.com/css/css_float.asp
Besides, here are some relevant article about create menu, you could refer to them:
http://www.c-sharpcorner.com/UploadFile/219d4d/how-to-create-a-dropdown-navigation-menu-using-cascading-sty/
http://www.w3schools.com/bootstrap/bootstrap_navbar.asp
Best regards, Dillion
Dec 26, 2016 06:02 AM|Assem Shawkat|LINK
Hi Dillion,
Thanks for your reply. I will try this and come back to you.
Regards.
Member
20 Points
31 Posts
Feb 01, 2017 11:15 AM|ifour.nishith@gmail.com|LINK
Hi ,
You use the below code and run then working Master Page With Arabic Menu
<!DOCTYPE html> <html> <head> <style> body {margin:0;} ul.topnav { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } ul.topnav li {float: right;} ul.topnav li a { display: inline-block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; transition: 0.3s; font-size: 17px; } ul.topnav li a:hover {background-color: #555;} ul.topnav li.icon {display: none;} @media screen and (max-width:680px) { ul.topnav li:not(:first-child) {display: none;} ul.topnav li.icon { float: right; display: inline-block; } } @media screen and (max-width:680px) { ul.topnav.responsive {position: relative;} ul.topnav.responsive li.icon { position: absolute; right: 0; top: 0; } ul.topnav.responsive li { float: none; display: inline; } ul.topnav.responsive li a { display: block; text-align: left; } } </style> </head> <body> <ul class="topnav" id="myTopnav"> <li><a class="active" href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> <li class="icon"> <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a> </li> </ul> <div style="padding-left:16px"> <h2>Responsive Topnav Example</h2> <p>Resize the browser window to see how it works.</p> </div> <script> function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } } </script> </body> </html>
Thanks.
None
0 Points
2 Posts
Master Page With Arabic Menu.
Dec 24, 2016 05:00 AM|Assem Shawkat|LINK
Good day,
I am building an Arabic ASP.NET web site.
On the master page, I want the menu items to be aligned from right to left instead of left to right.
How can I do this.
Your help is appreciated.
Thanks/Regards.
Assem Shawkat.
All-Star
45489 Points
7008 Posts
Microsoft
Re: Master Page With Arabic Menu.
Dec 26, 2016 05:54 AM|Zhi Lv - MSFT|LINK
Hi Assem Shawkat,
Welcome to asp.net forum.
As for this issue, I suggest you could try to use the float Property and refer to the following code:
The output as below:
More details about float property, see: http://www.w3schools.com/css/css_float.asp
Besides, here are some relevant article about create menu, you could refer to them:
http://www.c-sharpcorner.com/UploadFile/219d4d/how-to-create-a-dropdown-navigation-menu-using-cascading-sty/
http://www.w3schools.com/bootstrap/bootstrap_navbar.asp
Best regards,
Dillion
None
0 Points
2 Posts
Re: Master Page With Arabic Menu.
Dec 26, 2016 06:02 AM|Assem Shawkat|LINK
Hi Dillion,
Thanks for your reply. I will try this and come back to you.
Regards.
Assem Shawkat.
Member
20 Points
31 Posts
Re: Master Page With Arabic Menu.
Feb 01, 2017 11:15 AM|ifour.nishith@gmail.com|LINK
Hi ,
You use the below code and run then working Master Page With Arabic Menu
Thanks.
Software developer
custom software development company India