Search code examples
jquerycssmenuright-to-left

How can I make this menu work without jQuery?

I tried too many menus but only this one could help but I can't make it right-to-left (rtl) through CSS and I couldn't find out what's going on in jQuery...

enter link description here

I want sub menus to drop from right to the left. I cant do it with float or direction and every thing gets broken every time I tried.

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  outline: none;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html { overflow-y: scroll; }
body {
  font-family: Helvetica, 'Trebuchet MS', Tahoma, sans-serif;
  font-size: 62.5%;
  line-height: 1;
  color: #414141;
  background: #fafafa url('bg.png');
}

br { display: block; line-height: 1.6em; } 

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }

input, textarea { 
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  outline: none; 
}

blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong, b { font-weight: bold; }
em, i { font-style: italic; }

table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; height: auto; width: 100%; }


/** page structure **/
nav {
  display: block;
  width: 100%;
  height: 70px;
  background: #019fbe;
}

.wrapper { 
  display: block;
  margin: 0 auto;
  width: 750px;
}

#menu {
  display: block;
  position: relative;
  z-index: 99;

}

#menu li {
  display: block;
  float: left;

}
#menu li a {
  display: block;
  position: relative;
  float: left;
  padding: 0 35px;
  font-size: 1.5em;
  line-height: 70px;
  font-weight: bold;
  text-decoration: none;
  color: #f5f5f5;
}
#menu li a:hover, #menu li a.active {
  background: #006579;
  color: #fff;
}

#menu li ul {
  display: none;
  position: absolute;
  top: 70px;
  width: 200px;
  background: #006579;
  z-index: -1;
  -webkit-box-shadow: 0 2px 7px rgba(0,0,0,0.45);
  -moz-box-shadow: 0 2px 7px rgba(0,0,0,0.45);
  box-shadow: 0 2px 7px rgba(0,0,0,0.45);
}
#menu li ul li {
  display: block;
  width: 200px;
}
#menu li ul li a {
  display: block;
  float: none;
  color: #b9d7df;
  font-size: 1.35em;
  line-height: 50px;
  padding: 0 15px;
}
#menu li ul li a:hover {
  background: #384958;
  color: #fff;
}

#menu li ul.expanded {
  width: 400px;
}
#menu li ul.expanded li { margin-right: 200px; }



#menu li ul li ul {
  display: none;
  position: absolute;
  left: 200px;
  width:400px;
  top: 0;
  height: 100%;
  background: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
#menu li ul li ul li a { color: #fff; }
#menu li ul li ul li a:hover { text-decoration: underline; }

#menu li ul li.purple a:hover, #menu li ul li.purple a.active { background: #014a59; color: #fff; }
#menu li ul li.purple ul { background: #014a59; }

#menu li ul li.green a:hover, #menu li ul li.green a.active { background: #014a59; color: #fff; }
#menu li ul li.green ul { background: #014a59; }

#menu li ul li.aqua a:hover, #menu li ul li.aqua a.active { background: #014a59; color: #fff; }
#menu li ul li.aqua ul { background: #014a59; color: #fff; }

#menu li ul li.red a:hover, #menu li ul li.red a.active { background: #014a59; color: #fff; }
#menu li ul li.red ul { background: #014a59; }

#menu li ul li.blue a:hover, #menu li ul li.blue a.active { background: #014a59; color: #fff; }
#menu li ul li.blue ul { background: #014a59; }

#menu li ul li.gold a:hover, #menu li ul li.gold a.active { background: #014a59; color: #fff; }
#menu li ul li.gold ul { background: #014a59; }




/** clearfix **/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }

html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }

.s
{
  display: none;
  position: absolute;
  left: 100px;
  width:400px;
  top: 0;
  height: 100%;
  background: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.t
{
  display: none;
  position: absolute;
  left: 200px;
  width:400px;
  top: 0;
  height: 100%;
  background: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

<!doctype html>
<html lang="en-US">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html">
  <title>webson menu demo</title>
  <meta name="author" content="Hassan Bashiri">
  <link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
  <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
</head>

<body>
  <nav>
    <div class="wrapper">
      <ul id="menu" class="clearfix">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a>
          <ul>
            <li><a href="#">History</a></li>
            <li><a href="#">The Team</a></li>
            <li><a href="#">Our Mission</a></li>
          </ul>
        </li>
        <li><a href="#">Categories</a>
          <ul>
            <li class="purple"><a href="#">Design</a>
              <ul>
                <li><a href="#">Photoshop</a></li>
                <li><a href="#">Illustrator</a></li>
                <li><a href="#">InDesign</a></li>
                <li><a href="#">Copywriting</a></li>
                <li><a href="#">Journalism</a></li>
                <li><a href="#">Poetry</a></li>
                <li class="s"><a href="#">Storytelling</a></li>
                <li class="s" style="margin-top:50px;"><a href="#">Photoshop</a></li>
                <li class="s" style="margin-top:100px;"><a href="#">Illustrator</a></li>
                <li class="s" style="margin-top:150px;"><a href="#">InDesign</a></li>
                <li class="s" style="margin-top:200px;"><a href="#">Copywriting</a></li>
                <li class="s" style="margin-top:250px;"><a href="#">Journalism</a></li>
                <li class="t"><a href="#">Storytelling</a></li>
                <li class="t" style="margin-top:50px;"><a href="#">Photoshop</a></li>
                <li class="t" style="margin-top:100px;"><a href="#">Illustrator</a></li>
                <li class="t" style="margin-top:150px;"><a href="#">InDesign</a></li>
                <li class="t" style="margin-top:200px;"><a href="#">Copywriting</a></li>
                <li class="t" style="margin-top:250px;"><a href="#">Journalism</a></li>
              </ul>
            </li>
            <li class="green"><a href="#">Writing</a>
              <ul>
                <li><a href="#">Copywriting</a></li>
                <li><a href="#">Journalism</a></li>
                <li><a href="#">Poetry</a></li>
                <li><a href="#">Storytelling</a></li>
              </ul>
            </li>
            <li class="aqua"><a href="#">Accounting</a>
              <ul>
                <li><a href="#">Taxes</a></li>
                <li><a href="#">Credit</a></li>
                <li><a href="#">Asset Management</a></li>
              </ul>
            </li>
            <li class="red"><a href="#">Marketing</a>
              <ul>
                <li><a href="#">Print</a></li>
                <li><a href="#">Digital</a></li>
                <li><a href="#">Branding</a></li>
                <li><a href="#">Presenting</a></li>
                <li><a href="#">Social Media</a></li>
              </ul>
            </li>
            <li class="blue"><a href="#">Development</a>
              <ul>
                <li><a href="#">HTML5/CSS3</a></li>
                <li><a href="#">jQuery</a></li>
                <li><a href="#">PHP</a></li>
                <li><a href="#">Ruby on Rails</a></li>
              </ul>
            </li>
            <li class="gold"><a href="#">Photography</a>
              <ul>
                <li><a href="#">Mechanics</a></li>
                <li><a href="#">Composition</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a href="#">Social</a>
          <ul>
            <li><a href="#">Facebook</a></li>
            <li><a href="#">Twitter</a></li>
            <li><a href="#">YouTube</a></li>
            <li><a href="#">Instagram</a></li>
            <li><a href="#"></a></li>
          </ul>
        </li>
      </ul>
    </div>
  </nav>
<script type="text/javascript">
$(function(){
  $('a[href="#"]').on('click', function(e){
    e.preventDefault();
  });

  $('#menu > li').on('mouseover', function(e){
    $(this).find("ul:first").show();
    $(this).find('> a').addClass('active');
  }).on('mouseout', function(e){
    $(this).find("ul:first").hide();
    $(this).find('> a').removeClass('active');
  });

  $('#menu li li').on('mouseover',function(e){
    if($(this).has('ul').length) {
      $(this).parent().addClass('expanded');
    }
    $('ul:first',this).parent().find('> a').addClass('active');
    $('ul:first',this).show();
  }).on('mouseout',function(e){
    $(this).parent().removeClass('expanded');
    $('ul:first',this).parent().find('> a').removeClass('active');
    $('ul:first', this).hide();
  });
});
</script>
</body>
</html>
Solution

  • It wasn't too hard to convert this to RTL version, If you could add direction just to the body, It would have given you the rtl result and then you move on changing the float properties from left to right and those margin from right to left.

    Since it works in the opposite direction, You should try changing every other property as such with patience to achieve your desired result.

    I however added the RTL support as well as removed the jQuery part for you.

    Here you go

    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  outline: none;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html { overflow-y: scroll; }
body {
  font-family: Helvetica, 'Trebuchet MS', Tahoma, sans-serif;
  font-size: 62.5%;
  line-height: 1;
  color: #414141;
  background: #fafafa url('bg.png');
  direction: rtl;
}

br { display: block; line-height: 1.6em; } 

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }

input, textarea { 
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  outline: none; 
}

blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong, b { font-weight: bold; }
em, i { font-style: italic; }

table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; height: auto; width: 100%; }


/** page structure **/
nav {
  display: block;
  width: 100%;
  height: 70px;
  background: #019fbe;
}

.wrapper { 
  display: block;
  margin: 0 auto;
  width: 750px;
}

#menu {
  display: block;
  position: relative;
  z-index: 99;

}

#menu li {
  display: block;
  float: right;
}

#menu li:hover>ul{
    display:block;
}

#menu li li:hover>ul{
    display:block;
}

#menu li a {
  display: block;
  position: relative;
  float: right;
  padding: 0 35px;
  font-size: 1.5em;
  line-height: 70px;
  font-weight: bold;
  text-decoration: none;
  color: #f5f5f5;
}
#menu li a:hover, #menu li a.active {
  background: #006579;
  color: #fff;
}

#menu li ul {
  display: none;
  position: absolute;
  top: 70px;
  width: 200px;
  background: #006579;
  z-index: -1;
  -webkit-box-shadow: 0 2px 7px rgba(0,0,0,0.45);
  -moz-box-shadow: 0 2px 7px rgba(0,0,0,0.45);
  box-shadow: 0 2px 7px rgba(0,0,0,0.45);
}
#menu li ul li {
  display: block;
  width: 200px;
}
#menu li ul li a {
  display: block;
  float: none;
  color: #b9d7df;
  font-size: 1.35em;
  line-height: 50px;
  padding: 0 15px;
}
#menu li ul li a:hover {
  background: #384958;
  color: #fff;
}

#menu li ul.expanded {
  width: 400px;
}
#menu li ul.expanded li { margin-left: 200px; }



#menu li ul li ul {
  display: none;
  position: absolute;
  right: 200px;
  width:400px;
  top: 0;
  height: 100%;
  background: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
#menu li ul li ul li a { color: #fff; }
#menu li ul li ul li a:hover { text-decoration: underline; }

#menu li ul li.purple a:hover, #menu li ul li.purple a.active { background: #014a59; color: #fff; }
#menu li ul li.purple ul { background: #014a59; }

#menu li ul li.green a:hover, #menu li ul li.green a.active { background: #014a59; color: #fff; }
#menu li ul li.green ul { background: #014a59; }

#menu li ul li.aqua a:hover, #menu li ul li.aqua a.active { background: #014a59; color: #fff; }
#menu li ul li.aqua ul { background: #014a59; color: #fff; }

#menu li ul li.red a:hover, #menu li ul li.red a.active { background: #014a59; color: #fff; }
#menu li ul li.red ul { background: #014a59; }

#menu li ul li.blue a:hover, #menu li ul li.blue a.active { background: #014a59; color: #fff; }
#menu li ul li.blue ul { background: #014a59; }

#menu li ul li.gold a:hover, #menu li ul li.gold a.active { background: #014a59; color: #fff; }
#menu li ul li.gold ul { background: #014a59; }




/** clearfix **/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }

html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }

.s
{
  display: none;
  position: absolute;
  right: 100px;
  width:400px;
  top: 0;
  height: 100%;
  background: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.t
{
  display: none;
  position: absolute;
  right: 200px;
  width:400px;
  top: 0;
  height: 100%;
  background: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
     <nav>
    <div class="wrapper">
      <ul id="menu" class="clearfix">
        <li><a href="#">منزل</a></li>
        <li><a href="#">حول</a>
          <ul>
            <li><a href="#">اريخ</a></li>
            <li><a href="#">عرض</a></li>
            <li><a href="#">عرض</a></li>
          </ul>
        </li>
        <li><a href="#">عرض</a>
          <ul>
            <li class="purple"><a href="#">عرض</a>
              <ul>
                <li><a href="#">عرض</a></li>
                <li><a href="#">عرض</a></li>
                <li><a href="#">عرض</a></li>
                <li><a href="#">عرض</a></li>
                <li><a href="#">عرض</a></li>
                <li><a href="#">عرض</a></li>
                <li class="s"><a href="#">عرض</a></li>
                <li class="s" style="margin-top:50px;"><a href="#">عرض</a></li>
                <li class="s" style="margin-top:100px;"><a href="#">عرض</a></li>
                <li class="s" style="margin-top:150px;"><a href="#">عرض</a></li>
                <li class="s" style="margin-top:200px;"><a href="#">عرض</a></li>
                <li class="s" style="margin-top:250px;"><a href="#">عرض</a></li>
                <li class="t"><a href="#">عرض</a></li>
                <li class="t" style="margin-top:50px;"><a href="#">عرض</a></li>
                <li class="t" style="margin-top:100px;"><a href="#">عرض</a></li>
                <li class="t" style="margin-top:150px;"><a href="#">عرض</a></li>
                <li class="t" style="margin-top:200px;"><a href="#">عرض</a></li>
                <li class="t" style="margin-top:250px;"><a href="#">عرض</a></li>
              </ul>
            </li>
            <li class="green"><a href="#">عرض</a>
              <ul>
                <li><a href="#">عرض</a></li>
                <li><a href="#">عرض</a></li>
                <li><a href="#">عرض</a></li>
                <li><a href="#">عرض</a></li>
              </ul>
            </li>
            <li class="aqua"><a href="#">عرض</a>
              <ul>
                <li><a href="#">عرض</a></li>
                <li><a href="#">عرض</a></li>
                <li><a href="#">عرض</a></li>
              </ul>
            </li>
            <li class="red"><a href="#">عرض</a>
              <ul>
                <li><a href="#">عرض</a></li>
                <li><a href="#">عرض</a></li>
                <li><a href="#">عرض</a></li>
                <li><a href="#">عرض</a></li>
                <li><a href="#">عرض</a></li>
              </ul>
            </li>
            <li class="blue"><a href="#">عرض</a>
              <ul>
                <li><a href="#">عرض</a></li>
                <li><a href="#">عرض</a></li>
                <li><a href="#">عرض</a></li>
                <li><a href="#">عرض</a></li>
              </ul>
            </li>
            <li class="gold"><a href="#">عرض</a>
              <ul>
                <li><a href="#">عرض</a></li>
                <li><a href="#">عرض</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a href="#">عرض</a>
          <ul>
            <li><a href="#">عرض</a></li>
            <li><a href="#">عرض</a></li>
            <li><a href="#">عرض</a></li>
            <li><a href="#">عرض</a></li>
            <li><a href="#"></a></li>
          </ul>
        </li>
      </ul>
    </div>
  </nav>