locked
Master Page With Arabic Menu. RRS feed

  • Question

  • User-1565321417 posted

    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.

    Saturday, December 24, 2016 5:00 AM

All replies

  • User-271186128 posted

    Hi Assem Shawkat,

    Welcome to asp.net forum.

    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

    Monday, December 26, 2016 5:54 AM
  • User-1565321417 posted

    Hi Dillion,

    Thanks for your reply. I will try this and come back to you.

    Regards.

    Assem Shawkat.

    Monday, December 26, 2016 6:02 AM
  • User-1101191399 posted

    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 {;}
      ul.topnav.responsive li.icon {
        ;
        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.

    Wednesday, February 1, 2017 11:15 AM