How to apply image on menu for slider using jQuery Lava Lamp Plugin in ASP.Net

Last Reply on Jun 07, 2017 08:07 AM By nedash

Posted on Jun 05, 2017 02:45 AM

hi

I use below code for horizental menu

https://www.script-tutorials.com/pure-css3-lavalamp-menu/

 

as you see here, is image that move at top of menu below is css for that image:

#lavalamp {
    background: url('lavalamp.png') no-repeat scroll 0 0 transparent;
    height: 16px;
    left: 13px;
    position: absolute;
    top: 0px;
    width:64px;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
}

 

now I want use other image for it so I change width and hieght:

 

#lavalamp {
    background: url('TopImage.png') no-repeat scroll 0 0 transparent;
    height: 57px;
    left: 300px;
    position: absolute;
    top: 0px;
    width:170px;

    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
}

here when I change  width:170px i t worked correctly but when I change  hight:57px  it doesn't worked correctly I mean when I move with mouse over menu image doesn't move or move hardly

below is complete css:

@font-face {
    font-family:'m1';/*تعریف یک نام برای فونت*/
    src:url('../fonts/m1.eot');/*اکسپلورر 9 به بعد*/
    src:local('m1'),/*بررسی نصب بودن فونت در سیستم کاربر*/
        local('m1'),/*برای برخی از مرورگرها مانند سافاری*/
        url('../fonts/m1.eot?#iefix') format('embedded-opentype'),/*هک برای اکسپلورر 8 و ماقبل*/
        url('../fonts/m1.woff') format('woff'),/*مرورگر های جدید*/
        url('../fonts/m1.ttf') format('truetype'),/*تمام مرورگرها به جزء اکسپلورر*/
        url('../fonts/m1.svg#m1') format('svg');/*نسخه های قدیمی سیستم عامل iOS*/
    font-style:normal;
    font-weight:normal;
}

#nav,#nav ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
      /*border:1px solid green;*/
}
#nav {
    background: url('menu_bg.png') no-repeat scroll 0 0 transparent;
    clear: both;
    font-size: 12px;
    height: 58px;
    padding: 0 0 0 9px;
    position: relative;
    width: 450px;
}
#nav ul {
    background-color: #222;
    border:1px solid #222;
    border-radius: 0 5px 5px 5px;
    border-width: 0 1px 1px;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
    left: -9999px;
    overflow: hidden;
    position: absolute;
    top: -9999px;
    z-index: 2;

    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -o-transform: scaleY(0);
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
     /*border:1px solid blue;*/

    /*-moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;

    -moz-transition: -moz-transform 0.1s linear;
    -ms-transition: -ms-transform 0.1s linear;
    -o-transition: -o-transform 0.1s linear;
    -webkit-transition: -webkit-transform 0.1s linear;
    transition: transform 0.1s linear;*/
}
#nav li {
    /*background: url('menu_line.png') no-repeat scroll right 5px transparent;*/
    float: left;
    position: relative;
     /*border:1px solid red;*/
}
.container {
     float:right;
    height: 55px;
    /*margin: 10px auto;*/
    width: 460px;
     margin:10px 36px 0 0;
     /*border:1px solid red;*/

}
#nav li a {
    color: #C6b85e;
    display: block;
    float: left;
    /*font-weight: normal;*/
     font-family:m1;
    height: 30px;
    padding: 15px 32px 0;
    position: relative;
    text-decoration: none;
    text-shadow: 1px 1px 1px #000000;
     font-size:17px;
}
#nav li:hover > a {
    color: white;
}
#nav li:hover, #nav a:focus, #nav a:hover, #nav a:active {
    background: none repeat scroll 0 0;
     /*height:41px;*/
    outline: 0 none;
}
#nav li:hover ul.subs {
    left: 0;
    top: 53px;
    width: 180px;
   
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -o-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
}
#nav ul li {
    background: none;
    width: 100%;
}
#nav ul li a {
    float: none;
}
#nav ul li:hover > a {
    background-color: #121212;
    color: #00B4FF;
}
#lavalamp {
    background: url('lavalamp.png') no-repeat scroll 0 0 transparent;
    height: 57px;
    left: 300px;
    position: absolute;
    top: 0px;
    width:170px;

    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
}
#lavalamp:hover {
    -moz-transition-duration: 3000s;
    -ms-transition-duration: 3000s;
    -o-transition-duration: 3000s;
    -webkit-transition-duration: 3000s;
    transition-duration: 3000s;
}

#nav li:nth-of-type(1):hover ~ #lavalamp {
    left: 5px;
}
#nav li:nth-of-type(2):hover ~ #lavalamp {
    left: 150px;
}
#nav li:nth-of-type(3):hover ~ #lavalamp {
    left: 294px;
}
#nav li:nth-of-type(4):hover ~ #lavalamp {
    left: 250px;
}
#nav li:nth-of-type(5):hover ~ #lavalamp {
    left: 330px;
}
#nav li:nth-of-type(6):hover ~ #lavalamp {
    left: 410px;
}
#nav li:nth-of-type(7):hover ~ #lavalamp {
    left: 490px;
}
#nav li:nth-of-type(8):hover ~ #lavalamp {
    left: 565px;
}

what should I do now?

best regards

neda

Posted on Jun 07, 2017 07:35 AM

Hi nedash,

I have done alot of workaround for maintaining the effect on the height of 57px but it seems that div is not getting positioned properly with the help of pure css. so we need to use the jquery lavalamp plugin for achieving the task.

I have used below plugin and refer below link from where you will get the needed js and css files for developing the lavalamp menu.

Lava Lamp Plugin

Refer below sample code and modify it according to your need.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="jquery.lavalamp.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="jquery.lavalamp.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#nav').lavalamp();
        });
    </script>
    <style type="text/css">
        .lavalamp-object
        {
            background: url(https://i.imgsafe.org/53c4d18581.png) no-repeat;
            background-size: 70px 57px;
        }
        #nav, #nav ul
        {
            list-style: none outside none;
            margin: 0;
            padding: 0;
        }
        #nav
        {
            background: url('https://www.script-tutorials.com/demos/249/css/menu_bg.png') no-repeat scroll 0 0 transparent;
            clear: both;
            font-size: 12px;
            height: 58px;
            padding: 0 0 0 9px;
            position: relative;
            width: 957px;
        }
        #nav ul
        {
            background-color: #222;
            border: 1px solid #222;
            border-radius: 0 5px 5px 5px;
            border-width: 0 1px 1px;
            box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
            left: -9999px;
            overflow: hidden;
            position: absolute;
            top: -9999px;
            z-index: 2;
            -moz-transform: scaleY(0);
            -ms-transform: scaleY(0);
            -o-transform: scaleY(0);
            -webkit-transform: scaleY(0);
            transform: scaleY(0);
            -moz-transform-origin: 0 0;
            -ms-transform-origin: 0 0;
            -o-transform-origin: 0 0;
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
            -moz-transition: -moz-transform 0.1s linear;
            -ms-transition: -ms-transform 0.1s linear;
            -o-transition: -o-transform 0.1s linear;
            -webkit-transition: -webkit-transform 0.1s linear;
            transition: transform 0.1s linear;
        }
        #nav li
        {
            background: url(https://www.script-tutorials.com/demos/249/css/menu_line.png) no-repeat scroll right 5px transparent;
            float: left;
            position: relative;
        }
        #nav li a
        {
            color: #FFFFFF;
            display: block;
            float: left;
            font-weight: normal;
            height: 30px;
            padding: 23px 20px 0;
            position: relative;
            text-decoration: none;
            text-shadow: 1px 1px 1px #000000;
        }
        
        .subs
        {
            width: 100px;
            text-align: center;
        }
        #nav li:hover ul.subs
        {
            left: 0;
            top: 57px;
            -moz-transform: scaleY(1);
            -ms-transform: scaleY(1);
            -o-transform: scaleY(1);
            -webkit-transform: scaleY(1);
            transform: scaleY(1);
        }
        #nav ul li
        {
            background: none;
            width: 100%;
        }
        #nav ul li a
        {
            float: none;
        }
        #nav ul li:hover > a
        {
            background-color: #121212;
            color: #00B4FF;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <ul id="nav">
            <li class="active"><a href="http://www.script-tutorials.com/">تماس با ما</a></li>
            <li><a href="#">درباره ما</a> </li>
            <li><a href="#">مشاوران شما</a> </li>
            <li><a href="http://www.script-tutorials.com/">درخواست ملک</a></li>
            <li><a href="#">سپردن ملک</a> </li>
            <li><a href="#">لیست املاک</a> </li>
        </ul>
    </div>
    </form>
</body>
</html>

ScreenShot