small medium large xlarge

Back to: All Forums  HTML5 and CSS3
Generic-user-small
28 Aug 2017, 14:02
ali (1 post)

How I Can To Change LTR menu TO RTL MENU

  1. LTR: home about contact 2. TO RTL: contact about home

you Can See the menu CSS3 Code as below: ~~~ @import url(http://fonts.googleapis.com/css?family=Fjalla+One); .clearfix{*zoom:1} .clearfix:before, .clearfix:after{display:table;content:”“;line-height:0} .clearfix:after{clear:both} .hide-text{font:0/0 a; color:transparent; text-shadow:none; background-color:transparent;border:0} .input-block-level{display:block; width:100%;min-height:30px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box} body{padding-top:80px; font-size:12px; color:#34495e; background:#f5f5f5; direction: rtl; } body h1,body h2,body h3,body h4,body .created{font-family:”Fjalla One”;font-weight:normal} body h5,body h6{margin:0}body h3,body h4{margin-top:0} .btn{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;border:0;background-image:none;text-shadow:none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none} .btn.btn-transparent{border:3px solid #fff;background:transparent;color:#fff} .btn.btn-transparent:hover{border-color:rgba(255,255,255,0.5)} .btn.btn-link{color:#2dcc70;padding:0} .btn.btn-link:hover{text-decoration:none} .btn-primary{background-color:#2dcc70} .btn-primary:hover{background-color:#24a259} a{color:#2dcc70;-webkit-transition:300ms;-moz-transition:300ms;-o-transition:300ms;transition:300ms} a:hover,a:focus{color:#005580;text-decoration:none;outline:0} .dropdown-menu { margin-top: -1px; min-width: 180px; } body>section{padding:50px 0}body>section#slide-show{padding:0} #recent-works{background:#2dcc70;color:#fff} #recent-works .links>a{background:#fff;color:#2dcc70;text-shadow:none} #clients{background:#fff}#clients h4{color:#999} #clients .carousel{margin-bottom:0} #clients .clients ul.thumbnails{margin:0} #clients .clients ul.thumbnails>li{text-align:center;margin-bottom:0} #clients .prev,#clients .next{color:#999} .title{background:#2dcc70;color:#fff;padding:20px 0} .center{text-align:center} .box{background-color:#fff;border-top:1px solid #f0f0f0;-webkit-box-shadow:0 1px 2px 0 rgba(0,0,0,0.1);box-shadow:0 1px 2px 0 rgba(0,0,0,0.1);padding:10px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px} .progress{margin-bottom:10px} .progress,.progress .bar{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;background-image:none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;text-shadow:none;height:30px;line-height:30px} .label,.badge{font-weight:300;font-size:90%}ul.breadcrumb{margin:12px 0 0;background:transparent} ul.breadcrumb>li{text-shadow:none} ul.breadcrumb>li>a,ul.breadcrumb>li .divider{color:#fff} ul.breadcrumb>li.active{color:rgba(255,255,255,0.7)} ul.tag-cloud li{display:inline-block;margin:0 0 2px 0} .btn-social{border:0;color:#fff;text-shadow:0 1px rgba(0,0,0,0.5)} .btn-social.btn-facebook{background:#4f7dd4} .btn-social.btn-facebook:hover{background:#789bde} .btn-social.btn-twitter{background:#5bceff} .btn-social.btn-twitter:hover{background:#8eddff} .btn-social.btn-linkedin{background:#21a6d8} .btn-social.btn-linkedin:hover{background:#49b9e3} .btn-social.btn-google-plus{background:#dc422b} .btn-social.btn-google-plus:hover{background:#e36957} .btn-social:hover{color:#fff} header.navbar .navbar-inner { background: #fff !important; border: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } header #logo{width:220px;height:80px;background:url(../images/logo.png) no-repeat 0 50%} header.navbar { margin-bottom: 0; } header.navbar .nav { margin-top: 20px; direction:rtl; } header.navbar .nav > li { margin-left: 1px; } header.navbar .nav > li > a { padding-top: 10px; padding-bottom: 10px; color: #333; font-family: “Fjalla One”; font-size: 14px; text-transform: uppercase; text-shadow: none; } header.navbar .nav>li>a:hover{background:transparent;color:#2dcc70;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none} header.navbar .nav>li.active>a,header.navbar .nav>li.active>a:hover{background:transparent;color:#2dcc70;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none} header.navbar .nav>li.dropdown.open>a.dropdown-toggle{background:transparent;color:#2dcc70} header.navbar .nav>li.login>a{border-left:1px solid #e5e5e5} header .dropdown-menu { margin-top: 20px; } header .dropdown-menu:before { display: none !important; } .navbar .nav li.dropdown.open>.dropdown-toggle,.navbar .nav li.dropdown.active>.dropdown-toggle,.navbar .nav li.dropdown.open.active>.dropdown-toggle{background-color:transparent;color:#2dcc70} .navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .navbar .nav > li > a:focus, .navbar .nav > li > a:hover { color: #2dcc70; } .dropdown-menu { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; padding: 0; border: 0; } .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus, .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .dropdown-submenu:hover > a, .dropdown-submenu:focus > a { background: #24a259; } .main-info{background-color:#fff;color:#999} .main-info h4{color:#999} .icon-medium{font-size:18px;width:18px;line-height:18px;text-align:center;display:inline-block;background:#2dcc70;padding:10px;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;color:#fff} .modal{border:0} .modal#loginForm{width:600px;margin-left:-300px} .modal .modal-header{border:0;padding:20px 20px 0} .modal .modal-header>h4{font-weight:300;font-size:14px;color:#848484;text-transform:uppercase;margin:0} .modal .modal-body{padding:20px} .modal input[type=”text”],.modal input[type=”password”]{padding:5px 10px;min-height:30px;width:130px;margin-right:10px} .modal .icon-remove{color:#848484;position:absolute;right:-5px;top:-5px;width:16px;height:16px;line-height:16px;text-align:center;display:block;background:#ebebeb;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;cursor:pointer} .modal button{margin-left:10px;border:0}.gap{margin-bottom:50px} .big-gap{margin-bottom:100px}.no-margin{margin:0;padding:0} #services{background:#252525;color:#999} #services h1,#services h2,#services h3,#services h4,#services h5,#services h6{color:#fff} #main-contents{margin-top:20px}#main-contents .blog-news .created{font-size:18px;color:#2dcc70} .registration-form{border:0;background-color:#fff;border-top:1px solid #f0f0f0;-webkit-box-shadow:0 1px 2px 0 rgba(0,0,0,0.1);-moz-box-shadow:0 1px 2px 0 rgba(0,0,0,0.1);box-shadow:0 1px 2px 0 rgba(0,0,0,0.1);padding:20px;display:inline-block}#bottom{background:#232323;color:#6f6f6f} #bottom h4{margin-top:0;margin-bottom:15px} #bottom h1,#bottom h2,#bottom h3,#bottom h4,#bottom h5,#bottom h6{color:#fff} #bottom a{color:#6f6f6f} #bottom a:hover{color:#2dcc70} #bottom ul.address>li{position:relative;padding-left:20px;margin-top:10px} #bottom ul.address>li:first-child{margin-top:0} #bottom ul.address>li>i{position:absolute;top:3px;left:0} #bottom ul.thumbnails{margin-bottom:0} #bottom ul.thumbnails li{margin-bottom:5px} ul.arrow,ul.arrow-double,ul.tick,ul.cross,ul.star,ul.rss{list-style:none;padding:0;margin:0} ul.arrow li::before,ul.arrow-double li::before,ul.tick li::before,ul.cross li::before,ul.star li::before,ul.rss li::before,ul.arrow li::after,ul.arrow-double li::after,ul.tick li::after,ul.cross li::after,ul.star li::after,ul.rss li::after{font-family:FontAwesome;font-size:11px} ul.arrow li::before, ul.arrow-double li::before, ul.tick li::before, ul.cross li::before, ul.star li::before, ul.rss li::before { margin-right: 5px; } ul.arrow li::before{content:”\f105”} ul.arrow-double li::before{content:”\f101”} ul.tick li::before{content:”\f00c”} ul.cross li::before{content:”\f00d”} ul.star li::before{content:”\f006”} ul.rss li::before{content:”\f09e”} #footer{background:#333;padding-top:15px;padding-bottom:15px;color:#666} #footer a{color:#666} #footer a:hover{color:#2dcc70} #footer #gototop{height:40px;line-height:40px;width:40px;text-align:center;display:inline-block;background:#1d1d1d;font-size:24px;color:#fff} #footer #gototop:hover{background:#2b2b2b;text-decoration:none} #footer .cp{margin-top:11px} ul.social{list-style:none;margin:10px 0 0;padding:0;display:inline-block} ul.social>li{display:inline-block;margin:0 5px} ul.social>li>a{font-size:24px;color:#666} ul.social>li>a:hover{color:#999} .box-border{padding:15px} .accordion-group{background-color:#fff;border-top:1px solid #f0f0f0} .accordion-heading .accordion-toggle{color:#666;font-weight:700} .accordion-inner{border-top:0} .blog .blog-item h2{margin-top:0} .blog .blog-item .date span{display:block;text-align:center} .blog .blog-item .date span.day{font-size:50px;line-height:50px;padding-top:10px;font-family:”Fjalla One”,sans-serif} .blog .blog-item .date span.month{font-size:18px} .blog .blog-item .tag{margin-top:5px} .blog .blog-item .avatar{margin-top:5px} select,textarea,input[type=”text”],input[type=”password”],input[type=”datetime”],input[type=”datetime-local”],input[type=”date”],input[type=”month”],input[type=”time”],input[type=”week”],input[type=”number”],input[type=”email”],input[type=”url”],input[type=”search”],input[type=”tel”],input[type=”color”],.uneditable-input{-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;min-height:50px;padding:0 15px;border:3px solid #ededed}select:focus,textarea:focus,input[type=”text”]:focus,input[type=”password”]:focus,input[type=”datetime”]:focus,input[type=”datetime-local”]:focus,input[type=”date”]:focus,input[type=”month”]:focus,input[type=”time”]:focus,input[type=”week”]:focus,input[type=”number”]:focus,input[type=”email”]:focus,input[type=”url”]:focus,input[type=”search”]:focus,input[type=”tel”]:focus,input[type=”color”]:focus,.uneditable-input:focus{border-color:#2dcc70;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.input-block-level{min-height:50px}textarea#message{padding:10px 15px;height:219px}.widget{margin-bottom:30px}.widget>h3{font-size:16px;margin-top:0}.widget h5{margin-top:10px}.widget .date{margin-top:5px;padding:8px 10px;background:#2dcc70}.widget .date>span{display:block;text-align:center;font-family:”Fjalla One”;color:#fff}.widget .date>span.month{font-size:14px;line-height:14px;font-weight:700;text-transform:uppercase}.widget .date>span.day{font-size:18px;line-height:18px} #pricing-table{margin-top:20px;margin-bottom:30px} #pricing-table .plan{list-style:none;margin:0;padding:0;color:#fff} #pricing-table .plan.featured{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1)}#pricing-table .plan>li{padding:10px 15px}#pricing-table .plan>li.plan-name{background:rgba(0,0,0,0.1)}#pricing-table .plan>li.plan-name h3{margin:10px 0}#pricing-table .plan>li.plan-action{padding:20px 0}#pricing-table .plan1{background:#1abc9c}#pricing-table .plan2{background:#e74c3c}#pricing-table .plan3{background:#3498db}#pricing-table .plan4{background:#9b59b6}ul.gallery{display:block;margin:-15px}ul.gallery.col-1 li{width:100%}ul.gallery.col-2 li{width:50%}ul.gallery.col-3 li{width:33.3333%}ul.gallery.col-4 li{width:25%}ul.gallery li{display:block;padding:0;margin:0;float:left}ul.gallery li .desc{margin:15px}ul.gallery li .preview{margin:15px;display:block;position:relative}ul.gallery li .preview .overlay{width:100%;height:100%;position:absolute;left:0;top:0;background:rgba(0,0,0,0.6);opacity:0;filter:alpha(opacity=0);-webkit-transition:opacity 300ms;-moz-transition:opacity 300ms;-o-transition:opacity 300ms;transition:opacity 300ms}ul.gallery li .preview .links{width:104px;height:40px;position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-52px;opacity:0;filter:alpha(opacity=0);-webkit-transform:translate(0,-50px);-moz-transform:translate(0,-50px);-ms-transform:translate(0,-50px);-o-transform:translate(0,-50px);transform:translate(0,-50px);-webkit-transition:300ms;-moz-transition:300ms;-o-transition:300ms;transition:300ms}ul.gallery li .preview .links>a{width:50px;height:40px;line-height:40px;display:inline-block;text-align:center;background:#2dcc70;color:#fff;text-shadow:0 1px rgba(0,0,0,0.3);font-size:18px;margin:0 1px}ul.gallery li .preview:hover .overlay,ul.gallery li .preview:hover .links{opacity:1;filter:alpha(opacity=100)}ul.gallery li .preview:hover .links{-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-ms-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0)}ul.faq{list-style:none;margin:0}ul.faq li{margin-top:30px}ul.faq li:first-child{margin-top:0}ul.faq li span.number{display:block;float:left;width:50px;height:50px;line-height:50px;text-align:center;background:#2dcc70;color:#fff;font-size:24px}ul.faq li>div{margin-left:70px}ul.faq li>div h3{margin-top:0}#error{text-align:center;margin-top:150px;margin-bottom:150px} ~~~ AND you Can See the menu html Code as below: ~~~ <div class="nav-collapse collapse pull-right" > <ul class="nav" > <li class="active">Home</li> <li>About Us</li> <li>Services</li> <li>Portfolio</li> <li class="dropdown"> Pages <ul class="dropdown-menu"> <li>Career</li> <li>Blog Single</li> <li>FAQ</li> <li>Pricing</li> <li>404</li> <li>Typography</li> <li>Registration</li> <li class="divider"></li> <li>Privacy Policy</li> <li>Terms of Use</li> </ul> </li> <li>Blog</li> <li>Contact</li> <li class="login"> </li>

                    </ul>    
                </div><!--/.nav-collapse --> ~~~

AND you Can find the Zip file of complete html website at: https://files.fm/down.php?i=kcteb6x9&n=Good18_OK2.zip OR https://ufile.io/2dqow

You must be logged in to comment