Master Page With Arabic Menu.RSS

3 replies

Last post Feb 01, 2017 11:15 AM by ifour.nishith@gmail.com

‹ Previous Thread|Next Thread ›

Shortcuts

- Reply
Assem Shawka...
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.
- Reply
Zhi Lv - MSF...
All-Star

45439 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.

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
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
- Reply
Assem Shawka...
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.

ifour.nishit...

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

<!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.

Nisith Tukharia
Software developer
custom software development company India

‹ Previous Thread|Next Thread ›

Master Page With Arabic Menu.RSS

3 replies

Shortcuts

Master Page With Arabic Menu.

Re: Master Page With Arabic Menu.

Assem Shawkat

Re: Master Page With Arabic Menu.

Re: Master Page With Arabic Menu.