× Discussion about "eCommerce" VirtueMart/Joomla template

add styling to drop down menu item with child

  • trey-braid
  • trey-braid's Avatar Topic Author
  • Visitor
  • Visitor
7 years 11 months ago #4114 by trey-braid
what would i need to add to place an arrow next to a menu item that has a child item?

thanks
trey
Attachments:

Please Log in or Create an account to join the conversation.

More
7 years 11 months ago #4122 by ivan.milic
You need to do that by yourself.

Please Log in or Create an account to join the conversation.

  • trey-braid
  • trey-braid's Avatar Topic Author
  • Visitor
  • Visitor
7 years 11 months ago - 7 years 11 months ago #4127 by trey-braid
Replied by trey-braid on topic add styling to drop down menu item with child
excuse me ivan... i just need to know where to add this

background: url(/../images/child_menu_item.png) no-repeat
padding:4px; ( kinda guessing on the padding )


/* top menu */

#nav,#nav ul {
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:absolute;
z-index:120;
}

#nav ul {
display:none;
}

#nav a {
display:block;
padding:0px 1px 0px 1px;
margin:0;
text-decoration:none;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:13px;
font-weight:normal;
text-transform: capitalize;
}

#nav > li.active {
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
behavior: url(templates/hot_ecommerce/css/PIE.php);
line-height:27px;
}

#nav > li:hover {
-moz-border-radius:6px 6px 0 0;
-webkit-border-radius:6px 6px 0 0;
border-radius:6px 6px 0 0;
behavior: url(templates/hot_ecommerce/css/PIE.php);
line-height:27px;
}

#nav li:hover ul li a {
margin:0px 5px;
text-transform:none;
font-family:Arial, Helvetica, sans-serif;
font-size:11.5px;
font-weight:bold;
}

#nav li:hover ul {
-moz-border-radius:0 6px 6px 6px;
-webkit-border-radius:0 6px 6px 6px;
border-radius:0 6px 6px 6px;
behavior: url(templates/hot_ecommerce/css/PIE.php);
}

#nav li:hover ul li a:hover {
margin:0px 5px 0px 2px;
}

#nav li {
float:left;
margin:0px 5px 0px 2px;
position:relative;
line-height:24px;/*27px*/
}

#nav li ul li,#nav li ul li ul {
margin:0;
padding:0;
float:none;
cursor:pointer;
}

#nav li ul, #nav li ul ul {
padding-bottom:10px !important;
}

#nav li ul a {
width:260px; /*145px*/
line-height:normal;
padding:3px 4px 2px 4px;
border-bottom:0px solid #6e829a;
}

#nav li ul ul {
left:170px;
top:0;
margin:0;
}

#nav li:hover ul ul,#nav li:hover ul ul ul,#nav li:hover ul ul ul ul {
display:none;
}

#nav li:hover ul,#nav li li:hover ul,#nav li li li:hover ul,#nav li li li li:hover ul {
display:block;
}

#nav ul ul {
top:0;
z-index:200;
}


thanks

trey
Last edit: 7 years 11 months ago by trey-braid.

Please Log in or Create an account to join the conversation.

  • trey-braid
  • trey-braid's Avatar Topic Author
  • Visitor
  • Visitor
7 years 11 months ago #4130 by trey-braid
Replied by trey-braid on topic add styling to drop down menu item with child
background: url(/../images/child_menu_item.png) no-repeat
padding:4px; ( kinda guessing on the padding )


/* top menu */

#nav,#nav ul {
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:absolute;
z-index:120;
}

#nav ul {
display:none;
}

#nav a {
display:block;
padding:0px 1px 0px 1px;
margin:0;
text-decoration:none;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:13px;
font-weight:normal;
text-transform: capitalize;
}

#nav > li.active {
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
behavior: url(templates/hot_ecommerce/css/PIE.php);
line-height:27px;
}

#nav > li:hover {
-moz-border-radius:6px 6px 0 0;
-webkit-border-radius:6px 6px 0 0;
border-radius:6px 6px 0 0;
behavior: url(templates/hot_ecommerce/css/PIE.php);
line-height:27px;
}

#nav li:hover ul li a {
margin:0px 5px;
text-transform:none;
font-family:Arial, Helvetica, sans-serif;
font-size:11.5px;
font-weight:bold;
}

#nav li:hover ul {
-moz-border-radius:0 6px 6px 6px;
-webkit-border-radius:0 6px 6px 6px;
border-radius:0 6px 6px 6px;
behavior: url(templates/hot_ecommerce/css/PIE.php);
}

#nav li:hover ul li a:hover {
margin:0px 5px 0px 2px;
}

#nav li {
float:left;
margin:0px 5px 0px 2px;
position:relative;
line-height:24px;/*27px*/
}

#nav li ul li,#nav li ul li ul {
margin:0;
padding:0;
float:none;
cursor:pointer;
}

#nav li ul, #nav li ul ul {
padding-bottom:10px !important;
}

#nav li ul a {
width:260px; /*145px*/
line-height:normal;
padding:3px 4px 2px 4px;
border-bottom:0px solid #6e829a;
}

#nav li ul ul {
left:170px;
top:0;
margin:0;
}

#nav li:hover ul ul,#nav li:hover ul ul ul,#nav li:hover ul ul ul ul {
display:none;
}

#nav li:hover ul,#nav li li:hover ul,#nav li li li:hover ul,#nav li li li li:hover ul {
display:block;
}

#nav ul ul {
top:0;
z-index:200;
}


thanks

trey

Please Log in or Create an account to join the conversation.

More
7 years 11 months ago #4133 by ivan.milic
Quick solution for that would be to add <img... after title text example: Videos <img... , but you must do that directly from joomla database, because othewise you will see HTML instead of image, and after that you must never save that menu item title from joomla.
Maybe you will need to use &gtl and &lt; instead of > and < in db field.

Other would solutions require additional custom coding

Please Log in or Create an account to join the conversation.

  • trey-braid
  • trey-braid's Avatar Topic Author
  • Visitor
  • Visitor
7 years 11 months ago #4137 by trey-braid
Replied by trey-braid on topic add styling to drop down menu item with child
ok i am surprised that the menu dsnt offer this bit of customization... i know in other joomla templates the menu spells out child items in the css file...

thanks
trey

Please Log in or Create an account to join the conversation.

Moderators: milos
Time to create page: 0.125 seconds