Navigation



<!-- sticky -->
<section class="sticky-head">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 logo wow fadeInLeft">
<a href="/"><img src="images/ratanpara-overseas-logo.png" alt="Ratanpara Overseas " title="Ratanpara Overseas "></a>
</div>
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-12 nav">
<div class="mobile-nav-menu"></div>
<div class="nav-menu">
<div class="menu">
<nav id="main-menu" class="main-menu" style="display: block;">
<ul>
<li class="active"><a href="/" title="Home">Home</a> </li>
<li><a href="company-profile.html" title="Company Profile">Company Profile</a></li>
<li><a href="our-products.html" title="Our Products">Our Products</a>
<ul>
<li class="rel"><a href="spices.html" title="Spices">Spices</a>
<ul>
<li class="rel"><a href="coriander-seed.html" title="Coriander Seed">Coriander Seed</a></li>
<li class="rel"><a href="cumin-seed.html" title="Cumin Seed">Cumin Seed</a></li>
<li class="rel"><a href="fenugreek.html" title="Fenugreek">Fenugreek</a></li>
</ul>
</li>
<li class="rel"><a href="oil-seeds.html" title="Oil Seeds">Oil Seeds</a>
<ul>
<li class="rel"><a href="peanut.html" title="Peanut">Peanut</a></li>
<li class="rel"><a href="sesame-seed.html" title="Sesame Seed">Sesame Seed</a></li>
</ul>
</li>
<li class="rel"><a href="fruits.html" title="Fruits">Fruits</a>
<ul>
<li class="rel"><a href="kesar-mango.html" title="Kesar Mango">Kesar Mango</a></li>
<li class="rel"><a href="mango-pulp.html" title="Mango Pulp">Mango Pulp</a></li>
<li class="rel"><a href="pomegranate.html" title="Pomegranate">Pomegranate</a></li>
</ul>
</li>
<li class="rel"><a href="vegetables.html" title="Vegetables">Vegetables</a>
<ul>
<li class="rel"><a href="onion.html" title="Onion">Onion</a></li>
<li class="rel"><a href="potato.html" title="Potato">Potato</a></li>
<li class="rel"><a href="drumstick.html" title="Drumstick">Drumstick</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="sitemap.html" title="Sitemap">Sitemap</a></li>
<li><a href="media.html" title="Media">Media</a></li>
<li><a href="contact-us.html" title="Contact Us">Contact Us</a></li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</section>



@charset "utf-8";
/* CSS Document */

.nav-menu {
    float: right;
}
.menu {
display: inline-block;
position:relative;
}
.main-menu {
 display: inline-block;
 text-align: right;
}
.main-menu ul {
margin : 0;
padding : 0;
position : relative;
}
.main-menu ul li {
display: inline-block;
padding: 0;
position: relative;
}
.main-menu ul li.active{
 position:relative;
}
.main-menu ul li a {
 display: block;
     padding: 28px 12px;
 text-decoration: none;
 text-transform: uppercase;
 transition: all 0.4s ease 0s;
 position: relative;
 font-weight: 500;
    font-size: 16px;
 color: #000;
    font-family: 'Poppins', sans-serif;
}
.main-menu ul li ul:hover .main-menu ul li a{
  background: #fafafa;
}
.main-menu ul li a:hover {
transition : all 0.4s 0s ease;
color:#8db84d;
}

.main-menu ul ul {
 background: #0f1934 none repeat scroll 0 0;
 left: 12px;
 opacity: 0;
 position: absolute;
 text-align: left;
 top: 140px;
 transition: all 0.4s ease 0s;
 visibility: hidden;
 z-index: 99999;
 transition: all 0.3s ease 0s;
 border-top: 2px solid #8db84d;
 /* height:550px; */
 /* overflow-y:scroll; */
}
.main-menu ul ul li {
float : none;
width : 240px;
}
.main-menu ul ul li ul {
 visibility: hidden !important;
}
.main-menu ul ul li i {
 float: right;
}
.main-menu ul ul li:hover ul{
 visibility: visible !important;
 top : -1px;
 transition: all 0.3s ease 0s;
 opacity:1; 
}
.main-menu ul ul li a {
 line-height: 120%;
 padding: 10px 20px;
 color: #ddd;
 border-bottom: 1px solid #2c2e3d;
}
.main-menu ul ul li:last-child a{
 border-bottom:0px;
}
.main-menu ul ul li a:hover {
color:#8db84d;
background:#0f1934;
}
.main-menu ul ul ul {
left : 100%;
transition: all 0.3s ease 0s;
opacity:0;
border-top:0px;
border-bottom:1px solid #0f1934
}
.main-menu ul li:hover ul { 
 visibility: visible;
 transition: all 0.4s ease 0s; 
 opacity: 1;
 top:65px; 
}
.main-menu ul li a i {
margin-left : 6px;
}

a.meanmenu-reveal{
    display:none;
}
.mean-container .mean-bar {
 float: left;
 width: 100%;
 position: relative;
 background: #292929;
 z-index: 999999;
}
.mean-container a.meanmenu-reveal {
 width: 22px;
 height: 22px;
 padding: 13px 13px 11px;
 position: absolute;
 right: 0;
 cursor: pointer;
 color: #fff;
 text-decoration: none;
 font-size: 16px;
 text-indent: -9999em;
 font-size: 1px;
 display: block;
 font-weight: 700;
 margin-right: 15px;
 background: #0f1934;
 margin-top: 0;
}
.mean-container a.meanmenu-reveal span{
    display:block;
    background:#fff;
    height:3px;
    margin-top:3px;
}
.mean-container .mean-nav{
    float:left;
    width:100%;
    background:#0f1934;
}
.mean-container .mean-nav ul{
    padding:0;
    margin:0;
    width:100%;
    list-style-type:none;
}
.mean-container .mean-nav ul li{
    position:relative;
    float:left;
    width:100%;
}
.mean-container .mean-nav ul li a{
    display:block;
    float:left;
    width:90%;
    padding:1em 5%;
    margin:0;
    text-align:left;
    color:#fff;
    border-top:1px solid #2c2e3d;
    text-decoration:none;
    text-transform:uppercase;
}
.mean-container .mean-nav ul li li a{
    width:80%;
    padding:1em 10%;
    border-top:1px solid #f1f1f1;
    border-top:1px solid rgba(255,255,255,.25);
    opacity:.75;
    filter:alpha(opacity=75);
    text-shadow:none!important;
    visibility:visible;
}
.mean-container .mean-nav ul li.mean-last a{
    border-bottom:0;
    margin-bottom:0;
}
.mean-container .mean-nav ul li li li a{
    width:70%;
    padding:1em 15%;
}
.mean-container .mean-nav ul li li li li a{
    width:60%;
    padding:1em 20%;
}
.mean-container .mean-nav ul li li li li li a{
    width:50%;
    padding:1em 25%;
}
.mean-container .mean-nav ul li a:hover{
    background:#2c2e3d;
    background:rgba(255,255,255,.1);
}
.mean-container .mean-nav ul li a.mean-expand{
    margin-top:1px;
    width:26px;
    height:28px;
    padding:12px!important;
    text-align:center;
    position:absolute;
    right:0;
    top:0;
    z-index:2;
    font-weight:700;
    border:0!important;
    border-left:1px solid rgba(44,46,61,.95)!important;
    border-bottom:1px solid rgba(44,46,61,.95)!important;
}
.mean-container .mean-nav ul li a.mean-expand:hover{
    background:rgba(0,0,0,.9);
}
.mean-container .mean-push{
    float:left;
    width:100%;
    padding:0;
    margin:0;
    clear:both;
}
.mean-nav .wrapper{
    width:100%;
    padding:0;
    margin:0;
}
.mean-container .mean-bar,.mean-container .mean-bar *{
    -webkit-box-sizing:content-box;
    -moz-box-sizing:content-box;
    box-sizing:content-box;
}
.mean-remove{
    display:none!important;
}


!function($){"use strict";$.fn.meanmenu=function(e){var n={meanMenuTarget:jQuery(this),meanMenuContainer:"body",meanMenuClose:"X",meanMenuCloseSize:"18px",meanMenuOpen:"<span /><span /><span />",meanRevealPosition:"right",meanRevealPositionDistance:"0",meanRevealColour:"",meanScreenWidth:"480",meanNavPush:"",meanShowChildren:!0,meanExpandableChildren:!0,meanExpand:"+",meanContract:"-",meanRemoveAttrs:!1,onePage:!1,meanDisplay:"block",removeElements:""};e=$.extend(n,e);var a=window.innerWidth||document.documentElement.clientWidth;return this.each(function(){var n=e.meanMenuTarget,t=e.meanMenuContainer,r=e.meanMenuClose,i=e.meanMenuCloseSize,s=e.meanMenuOpen,u=e.meanRevealPosition,m=e.meanRevealPositionDistance,l=e.meanRevealColour,o=e.meanScreenWidth,c=e.meanNavPush,v=".meanmenu-reveal",h=e.meanShowChildren,d=e.meanExpandableChildren,y=e.meanExpand,j=e.meanContract,Q=e.meanRemoveAttrs,f=e.onePage,g=e.meanDisplay,p=e.removeElements,C=!1;(navigator.userAgent.match(/iPhone/i)||navigator.userAgent.match(/iPod/i)||navigator.userAgent.match(/iPad/i)||navigator.userAgent.match(/Android/i)||navigator.userAgent.match(/Blackberry/i)||navigator.userAgent.match(/Windows Phone/i))&&(C=!0),(navigator.userAgent.match(/MSIE 8/i)||navigator.userAgent.match(/MSIE 7/i))&&jQuery("html").css("overflow-y","scroll");var w="",x=function(){if("center"===u){var e=window.innerWidth||document.documentElement.clientWidth,n=e/2-22+"px";w="left:"+n+";right:auto;",C?jQuery(".meanmenu-reveal").animate({left:n}):jQuery(".meanmenu-reveal").css("left",n)}},A=!1,E=!1;"right"===u&&(w="right:"+m+";left:auto;"),"left"===u&&(w="left:"+m+";right:auto;"),x();var M="",P=function(){M.html(jQuery(M).is(".meanmenu-reveal.meanclose")?r:s)},W=function(){jQuery(".mean-bar,.mean-push").remove(),jQuery(t).removeClass("mean-container"),jQuery(n).css("display",g),A=!1,E=!1,jQuery(p).removeClass("mean-remove")},b=function(){var e="background:"+l+";color:"+l+";"+w;if(o>=a){jQuery(p).addClass("mean-remove"),E=!0,jQuery(t).addClass("mean-container"),jQuery(".mean-container").prepend('<div class="mean-bar"><a href="#nav" class="meanmenu-reveal" style="'+e+'">Show Navigation</a><nav class="mean-nav"></nav></div>');var r=jQuery(n).html();jQuery(".mean-nav").html(r),Q&&jQuery("nav.mean-nav ul, nav.mean-nav ul *").each(function(){jQuery(this).is(".mean-remove")?jQuery(this).attr("class","mean-remove"):jQuery(this).removeAttr("class"),jQuery(this).removeAttr("id")}),jQuery(n).before('<div class="mean-push" />'),jQuery(".mean-push").css("margin-top",c),jQuery(n).hide(),jQuery(".meanmenu-reveal").show(),jQuery(v).html(s),M=jQuery(v),jQuery(".mean-nav ul").hide(),h?d?(jQuery(".mean-nav ul ul").each(function(){jQuery(this).children().length&&jQuery(this,"li:first").parent().append('<a class="mean-expand" href="#" style="font-size: '+i+'">'+y+"</a>")}),jQuery(".mean-expand").on("click",function(e){e.preventDefault(),jQuery(this).hasClass("mean-clicked")?(jQuery(this).text(y),jQuery(this).prev("ul").slideUp(300,function(){})):(jQuery(this).text(j),jQuery(this).prev("ul").slideDown(300,function(){})),jQuery(this).toggleClass("mean-clicked")})):jQuery(".mean-nav ul ul").show():jQuery(".mean-nav ul ul").hide(),jQuery(".mean-nav ul li").last().addClass("mean-last"),M.removeClass("meanclose"),jQuery(M).click(function(e){e.preventDefault(),A===!1?(M.css("text-align","center"),M.css("text-indent","0"),M.css("font-size",i),jQuery(".mean-nav ul:first").slideDown(),A=!0):(jQuery(".mean-nav ul:first").slideUp(),A=!1),M.toggleClass("meanclose"),P(),jQuery(p).addClass("mean-remove")}),f&&jQuery(".mean-nav ul > li > a:first-child").on("click",function(){jQuery(".mean-nav ul:first").slideUp(),A=!1,jQuery(M).toggleClass("meanclose").html(s)})}else W()};C||jQuery(window).resize(function(){a=window.innerWidth||document.documentElement.clientWidth,a>o,W(),o>=a?(b(),x()):W()}),jQuery(window).resize(function(){a=window.innerWidth||document.documentElement.clientWidth,C?(x(),o>=a?E===!1&&b():W()):(W(),o>=a&&(b(),x()))}),b()})}}(jQuery);










    <script type="text/javascript">



     // toggle//



$('#main-menu').meanmenu({



meanScreenWidth: "1024",



meanMenuContainer: '.mobile-nav-menu',



});



</script>








































Comments











Post a Comment























Popular posts from this blog









Right click disable





















 <body class="tg-home" onLoad="disableClick()" oncontextmenu="return false"> //hide code// document.onkeydown = function(e) {     if(e.keyCode == 123) {      return false;     }     if(e.ctrlKey && e.shiftKey && e.keyCode == 'I'.charCodeAt(0)){      return false;     }     if(e.ctrlKey && e.shiftKey && e.keyCode == 'J'.charCodeAt(0)){      return false;     }     if(e.ctrlKey && e.keyCode == 'U'.charCodeAt(0)){      return false;     }     if(e.ctrlKey && e.shiftKey && e.keyCode == 'C'.charCodeAt(0)){      return false;     }        }  ///F12//  //------------------------------ function unloadJS(scriptName) {   var head = document.getElementsByTagName('head').item(0);   var js = document.getElementById(sc...








Read more










Moutain




















Image







  <!DOCTYPE html>  <html>  <head>  	 <title> Moutain </title>  </head>  <body>   	 <section class =" zoom ">  		 <img src =" mountain1.png " alt ="" title ="" id =" layer1 ">  		 <img src =" mountain2.png " alt ="" title ="" id =" layer2 ">  		 <img src =" text.png " alt ="" title ="" id =" text ">  	 </section>   	 <section class =" content ">  		 <h2> Lorem text is the dummy text for this </h2>   		 <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna  liqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occa...








Read more










Input Placeholder




















Image







   <!DOCTYPE html>  <html>  <head>   <title>Input Placeholder</title>   <link rel="stylesheet" type="text/css" href="style.css">  </head>  <body>    <div class="container">     <h2>How to Create Custom Input Filed</h2>      <form>      <div class="input-field">       <input type="text" name="" required="">       <label>Please Enter Your Full Name</label>       <span></span>      </div>       <input type="submit" value="Show Result" name="" class="btn">     </form>   </div>   </body>  </html>   <style type="text/css">  *{margin: 0px;   padding: 0px;   font-family: arial;  box-sizing: border-box;  }  body{ display: flex; justify-content: center; align-items: center; background-color: #111; min-height: 100vh;}  .c...








Read more