CODEWITHSUNDEEP
htmlcssbuttonmenu
Zdenka
Zdenka

Reputation: 33

How to style menu in CSS to look like a button

I would like to style joomla 3.x menu to look like a button - it looks like a button, changing colours on hover, active item displayed correctly but link does not work in the way I want - I must point with the mouse directly on the text to open the link and I would like to point anywhere in the button area to open the link....

My page code looks like this:

<ul class="nav menu">
<li class="item-101 current active parent"><a href="/" >Item 1</a></li>
<li class="item-102 parent"><a href="/index.php/item2" >Item 2</a></li>
<li class="item-103 parent"><a href="/index.php/item3" >Item 3</a></li>
</ul>

my CSS looks like this:

#menu /* layout main menu */
{
  clear:both;
  float:left;
  margin-top:1em;
  padding-bottom:1em;
  width:100%;
  background-color:gimgrey;
  background-image:url('/templates/swimming/images/logo.png');
  background-repeat:no-repeat;

}

ul.menu
{
   display: table;
   margin-left: auto;
   margin-right: 0em;
}

div#menu li /* horizontal menu layout */
{
  display: inline;
  padding: 0.7em 1em 0.7em 1em;
  border: 3px solid #FFFFFF;
  border-radius: 10px;
  margin-right:30px;
  background-color: #4180dd;
}

div#menu li a:hover /* link style on-mouse-over */
{
  color:#FFFFFF;
  text-transform: uppercase;
  text-decoration: none;

}

div#menu li:hover  /* button style on-mouse-over */
{
  padding: 0.7em 1em 0.7em 1em;
  border: 3px solid #FFFFFF;
  border-radius: 10px;
  background-color: #dd417f;
}

div#menu li a /* link style */
{
  color:#FFFFFF;
  font-size: 1em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-block;
}

div#menu li.active a /* active menu item style */
{
  color:#FFFFFF;
  text-transform: uppercase;
  text-decoration: none;
}

div#menu li.active /* active menu button style */
{
  padding: 0.7em 1em 0.7em 1em;
  border: 3px solid #FFFFFF;
  border-radius: 10px;
  background-color: #dd417f;
}

Without joomla I would do it vice versa <a href><li></li></a> to get the effect I need (to have as a link whole li area not only the text).

What am I doing wrong? Any advice?

Thanks, Zdenka

Upvotes: 3

Views: 11364

Answers (1)

Jon P
Jon P

Reputation: 19772

Try this (DEMO):

<ul class="nav menu">
    <li class="item-101 current active parent"><a href="/">Item 1</a>
    </li>
    <li class="item-102 parent"><a href="/index.php/item2">Item 2</a>
    </li>
    <li class="item-103 parent"><a href="/index.php/item3">Item 3</a>
    </li>
</ul>

CSS

.menu
/* layout main menu */
 {
    clear:both;
    float:left;
    margin-top:1em;
    padding-bottom:1em;
    width:100%;
    background-color:gimgrey;
    background-image:url('/templates/swimming/images/logo.png');
    background-repeat:no-repeat;
}
ul.menu {
    display: table;
    margin-left: auto;
    margin-right: 0em;
}
.menu li
/* horizontal menu layout */
 {
    display: inline-block;
    border: 3px solid #FFFFFF;
    border-radius: 10px;
    margin-right:30px;
    background-color: #4180dd;
}
.menu li a:hover
/* link style on-mouse-over */
 {
    color:#FFFFFF;
    text-transform: uppercase;
    text-decoration: none;
}
.menu li:hover
/* button style on-mouse-over */
 {
    border: 3px solid #FFFFFF;
    border-radius: 10px;
    background-color: #dd417f;
}
.menu li a
/* link style */
 {
    color:#FFFFFF;
    font-size: 1em;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    padding: 0.7em 1em 0.7em 1em;
}
.menu li.active a
/* active menu item style */
 {
    color:#FFFFFF;
    text-transform: uppercase;
    text-decoration: none;
}
.menu li.active
/* active menu button style */
 {
    border: 3px solid #FFFFFF;
    border-radius: 10px;
    background-color: #dd417f;
}

What I've done:

  • consistantly used class
  • Renoved div#menu which is looking for a div with ID of "menu"
  • Channged your li to inline-block and removed padding
  • Put the padding on the a tags, this will make their "target areas" bigger

Upvotes: 3

Related Questions