Zaloguj | Zarejestruj | FAQ
Anonymous

Drop down menu css customisation

+ Odpowiedz

Posty: 5 Strona 1 z 1


Drop down menu css customisation

przez nepalithito » Śr kwi 09, 2014 8:09 am

This is css copy of my drop down menu. I am looking to make rounded corner and if possible make example like this.

http://www.menucool.com/drop-down-menu


Kod: Zaznacz cały
/*jQuery MegaMenu Plugin
  Author: Devadatta Sahoo
  Author URI: http://www.geektantra.com */
body {
  font-family: arial;
  font-size: 12px;
  height: 100%;
  margin: 0px;
}
#Container {
  height: 100%;
  width: 100%;
  margin: auto;
  border-collapse: collapse;
}
a {
  color: #254154;
}
ul {
   text-align: left;
   margin: 25px;
   font-size: 16px;
   list-style-type: square;
}

.MegaMenu {
   background: #254156;
   padding: 5px 7px 0px;
   margin-bottom: -1px;
}
.MegaMenu a.MegaMenuLink:link, .MegaMenu a.MegaMenuLink:visited {
   display: inline-block;
   padding: 5px 20px 9px;
   margin: 1px 2px 0px 1px;
   color: #FFF;
   text-decoration: none;
   font-size: 15px;
   outline: none;
   z-index: 1000;
}
.MegaMenu a.MegaMenuLinkOff:link, .MegaMenu a.MegaMenuLinkOff:visited {
   display: inline-block;
   padding: 5px 20px 5px;
   margin: 1px 2px 4px 1px;
   color: #FFF;
   text-decoration: none;
   font-size: 15px;
   outline: none;
   z-index: 1000;
}
.MegaMenu a.MegaMenuLinkOff:hover {
   background: #FFF;
   color: #555;
/*   margin: 0px;*/
   padding: 4px 18px 4px 17px;
   border: 1px solid #9A9A9A;
   padding-right: 21px;
}
.MegaMenu a.MegaMenuLinkActive:link, .MegaMenu a.MegaMenuLinkActive:visited {
   background: #FFF;
   color: #555;
   margin: 0px;
   border: 1px solid #9A9A9A;
   padding-right: 21px;
   border-bottom: none;
}
.MegaMenu .MegaMenuContent{
   display: none;
}
#MegaMenuContent, #MegaMenuContentShadow {
   background: #FFF;
   border: 1px solid #9A9A9A;
   border-top: none;
   padding: 10px 10px;
   margin-left: 5px;
   position: absolute;
   z-index: 10;
}
#MegaMenuContentShadow {
   background: #111;
   margin-left: 8px;
   margin-top: 4px;
   z-index: 9;
   opacity: 0.5;
   -moz-opacity: 0.5;
   filter:alpha(opacity=50);
}
.MegaMenuTable {
  border-collapse: collapse;
  border: 1px solid #FFF;
}
.MegaMenuTable th {
  text-align: left;
  padding: 5px 10px;
  font-size: 13px;
}
.MegaMenuTable .MegaMenuHead {
  padding: 0px 5px 5px;
  border-bottom: 5px solid #EEE;
}
.MegaMenuTable td {
  vertical-align: top;
  border-right: 3px dotted #CCC;
}
.MegaMenuTable td.LastCell {
  border: none;
}
.MenuFoot div {
  border-top: 1px solid #CCC;
  margin: 10px 10px 5px 10px;
  font-size: 10px;
  color: #555;
  padding: 10px 0px 0px 0px;
}
.MenuFoot h2 {
  padding: 0px 0px 3px 0px;
  margin: 0px;
  font-size: 14px;
  color: #000;
}
.MegaMenuTable {
  cursor: default;
}
.MegaMenuTable a {
  cursor: pointer;
}
.MegaMenuTable .MegaMenuLists {
  margin: 0px 15px;
  padding: 0px;
  color: #BBB;
  list-style-type: square;
  list-style-position: inside;
}
.MegaMenuLists li {
  margin: 5px 0px 8px;
  font-weight: bold;
  font-size: 12px;
}
/*Non IE CSS Starts*/
html>body .MegaMenu a.MegaMenuLink:link,html>body .MegaMenu a.MegaMenuLink:visited {
   position: relative;
}
html>body #MegaMenuContent, html>body #MegaMenuContentShadow {
}

Avatar użytkownika

nepalithito

  • Posty: 95
  • Dołączył(a): Cz mar 01, 2012 10:10 am

Re: Drop down menu css customisation

przez XainPro » Śr kwi 09, 2014 8:59 am

The easy part – Firefox, Safari & Chrome

It’s best to avoid hacks if at all possible, and luckily Firefox, Safari and Chrome all support rounded corners through native CSS methods. Let’s apply a border-radius of 20 pixels to everything with the class ’rounded-corners’:

.rounded-corners {
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
}


then add class rounded-corners to your menus
Avatar użytkownika

XainPro

  • Posty: 3933
  • Dołączył(a): Pt lut 17, 2012 8:10 pm

Re: Drop down menu css customisation

przez nepalithito » Śr kwi 09, 2014 11:46 am

thank you very much for your post. I put above but it does not so up effect on it
Avatar użytkownika

nepalithito

  • Posty: 95
  • Dołączył(a): Cz mar 01, 2012 10:10 am

Re: Drop down menu css customisation

przez XainPro » Pt kwi 11, 2014 9:55 am

then you can learn how to make rounded corners from css without using images from the link given below
https://developer.mozilla.org/en-US/doc ... der-radius
Avatar użytkownika

XainPro

  • Posty: 3933
  • Dołączył(a): Pt lut 17, 2012 8:10 pm

Re: Drop down menu css customisation

przez comport9 » So maja 31, 2014 12:59 am

Very complicated code... try this example instead as a starter: viewtopic.php?f=6&t=8374&p=18622&hilit=drop+down#p18622
Rounded corners aren't difficult as Xianpro indicated.
Avatar użytkownika

comport9

  • Posty: 28
  • Dołączył(a): N lis 04, 2012 5:35 pm


+ Odpowiedz

Strona 1 z 1