menu control style - gradient and box shadow

xren · #1

Hi

I would like to change the style of the menu control with gradient box shadow effect.

How to do that?

Thanks,
Xiaoli

Wai · #2

Hi Xiaoli,

Do you have an example of what you are trying to do? Do you have a CSS example, or an image example?

xren · #3

The following is the sample code you can try and see the effect.

<DOCTYPE>
<html>
<head>
<meta>

<title>jQuery Drop Down Menu - Demo</title>

<style>
/*****Reset*****/

/*
css-plus by Jamy Golden
*/
/* Targeting both first and second level menus */
#nav li {
float:left;
margin:0;
padding:0;
list-style:none;
border-right:solid 1px white;
line-height:1.5em;
position: relative;
width: 10em;
}

#nav li a {
padding:0em 1em;
color:#3e3e3e;
font-size: 0.9em;
font-weight: bold;
display:block;
text-decoration:none;
border-right:1px solid #fff; /*to move apart the first level menu elements.*/
background-color:#dedede;
background-image: -moz-linear-gradient(#dedede,#a1a1a1);
background-image: -webkit-gradient(linear, left top, left bottom, from(#dedede), to(#a1a1a1));
background-image: -webkit-linear-gradient(#dedede, #a1a1a1);
background-image: -o-linear-gradient(#dedede, #a1a1a1);
background-image: -ms-linear-gradient(#dedede, #a1a1a1);
background-image: linear-gradient(#dedede, #a1a1a1);
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dedede', endColorstr='#a1a1a1'); /* for IE */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dedede', endColorstr='#a1a1a1'); /* for IE */
}

#nav li a:hover {

background: #1eadca;
background: -moz-linear-gradient(top, #C2EDF6 0%, #1EADCA 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #C2EDF6), color-stop(100%, #1EADCA));
background: -webkit-linear-gradient(top, #C2EDF6 0%, #1EADCA 100%);
background: -o-linear-gradient(top, #C2EDF6 0%, #1EADCA 100%);
background: -ms-linear-gradient(top, #C2EDF6 0%, #1EADCA 100%);
background: linear-gradient(to bottom, #C2EDF6 0%, #1EADCA 100%);
filter:progid:dximagetransform.microsoft.gradient(startColorstr='#C2EDF6', endColorstr='#1EADCA');
-ms-filter: progid:dximagetransform.microsoft.gradient(startColorstr='#C2EDF6', endColorstr='#1EADCA', GradientType=0);
}

/* Targeting the first level menu */
#nav {
float: left;
margin:0;
padding:0;
list-style:none;
}
#nav > li > a {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
}

/* Targeting the second level menu */
#nav li ul {
display: none;
width:10em;
margin:0;
padding:0;
float: left;
}

#nav li ul li {
margin:0;
padding:0;
}

#nav li ul li a {
border: none;
margin: 0;
padding: 0 0 0 5px;
background-color:#dedede;
background-image: -moz-linear-gradient(#dedede,#a1a1a1);
background-image: -webkit-gradient(linear, left top, left bottom, from(#dedede), to(#a1a1a1));
background-image: -webkit-linear-gradient(#dedede, #a1a1a1);
background-image: -o-linear-gradient(#dedede, #a1a1a1);
background-image: -ms-linear-gradient(#dedede, #a1a1a1);
background-image: linear-gradient(#dedede, #a1a1a1);
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dedede', endColorstr='#a1a1a1'); /* for IE */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dedede', endColorstr='#a1a1a1'); /* for IE */
}

#nav li ul li a:hover {
background-color: #1EADCA;
background-image: -moz-linear-gradient(#C2EDF6, #1EADCA);
background-image: -webkit-gradient(linear, left top, left bottom, from(#C2EDF6), to(#1EADCA));
background-image: -webkit-linear-gradient(#C2EDF6, #1EADCA);
background-image: -o-linear-gradient(#C2EDF6, #1EADCA);
background-image: -ms-linear-gradient(#C2EDF6, #1EADCA);
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#C2EDF6', endColorstr='#1EADCA'); /* for IE */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#C2EDF6', endColorstr='#1EADCA'); /* for IE */
background-image: linear-gradient(#C2EDF6, #1EADCA);
}

/* Third level menu */
#nav li ul li ul {
position: absolute;
top: 0em;
left:10em;
margin:0;
padding:0;

}

/* A class of current will be added via jQuery */
#nav li.current > a {
background: #1eadca;
background: -moz-linear-gradient(top, #C2EDF6 0%, #1EADCA 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #C2EDF6), color-stop(100%, #1EADCA));
background: -webkit-linear-gradient(top, #C2EDF6 0%, #1EADCA 100%);
background: -o-linear-gradient(top, #C2EDF6 0%, #1EADCA 100%);
background: -ms-linear-gradient(top, #C2EDF6 0%, #1EADCA 100%);
background: linear-gradient(to bottom, #C2EDF6 0%, #1EADCA 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#C2EDF6', endColorstr='#1EADCA', GradientType=0);
-ms-filter: progid:dximagetransform.microsoft.gradient(startColorstr='#C2EDF6', endColorstr='#1EADCA', GradientType=0);
}

/* CSS fallback */
#nav li:hover > ul.child { display: block; }
#nav li:hover > ul.grandchild { display: block; }

.clear{
clear:both;
}

</style>


<script></script>
<script>
$(document).ready(function(){

$("#nav ul.child").removeClass("child");

$("#nav li").has("ul").hover(function(){
$(this).addClass("current").children("ul").fadeIn();
}, function() {
$(this).removeClass("current").children("ul").hide();
});

});
</script>
</head>
<body>
<div>
<a>Return to post</a>
<div>
<h2>jQuery sub-navigation with CSS fall-back</h2>
<ul>
<li><a>Chart</a></li>
<li><a>Letter</a></li>
<li><a>Forms</a>
<ul>
<li><a>Referral</a></li>
<li><a>Questionnairs</a>
<ul>
<li><a>Intake</a></li>
<li><a>Follow-Up</a></li>
</ul>
</li>
</ul>
</li>
<li><a>Requisitions</a></li>
<li><a>Appointments</a></li>
<li><a>Notes</a></li>
<li><a>Manage</a>
<ul>
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
<li><a>Item 3</a></li>
</ul>
</li>

</ul>
</div>
</div>
</body>
</html>

Wai · #4

With this example, it depends on what the menu items need to do. Do the menu items go to different URLs/pages outside of Ebase? Does it need to run an Ebase script?

If the links goes to external URLs, then you can place the HTML for the menu into an HTML control as it is, and link the styles and javascript to the form. It will just work, I have just tried it.
The top <ul> does need an ID of nav though which was missing from your HTML source.

If on the other hand, you want it to run Ebase events on your form and/or go to another page on your form, (currently), you will have to use the Menu control to build the menu and apply your styles to the menu control.

xren · #5

I am not sure how to apply my css to the menu. Could you provide a sample or some advice?

Thank you.

Wai · #6

Hi Xiaoli,

I have created the CSS menu in Ebase. You can download the XML export file from the following URL:

http://www.ebaseftp.com/download/forum/css_menu.xml

The current Ebase Menus do not generate the same standard UL/LI list structure as your example, therefore you cannot just re-use the CSS exactly as it is. Instead, you need to take what you need (the styles) and re-apply them to the Ebase Menu control.

In the sample, if you look at the Control Styles for the Horizontal Menu Control, I have added the required CSS into the Top Level and Drop Down Tabs (under Advanced Properties).

View the Code tab in Unselected Style for an example. Similarly, the Selected and Hover styles are also set. The same applies to the Drop Down tab.

Please let me know if you have any problems.

Community Forum

menu control style - gradient and box shadow

menu control style - gradient and box shadow

Who is online