everybody!
Got into a bit of a trouble here.
So, basically, I badly want to make my Parent Menu Items in Joomla! main menu slightly different then other Menu Items. What I want to achieve is that the Parent Item would have ... let's say, a little triangle made with bg image on the right to show visitors there are some submenus included.
I've been trying to get my CSS working, but somehow nothing happenes and with inspecting the generated code and elements CSS hasn't applied anything to the Parent Items.
Here's the code:
<li class="item-101 current active"><a href="/" >Domov</a></li>
<li class="item-107"><a href="/index.php/o-meni" >O meni</a></li>
<li class="item-108 deeper parent"><a href="/index.php/psihoterapija" >Psihoterapija</a>
<ul class="nav-child unstyled small">
<li class="item-113"><a href="/index.php/psihoterapija/podmeni-1" >Podmeni 1</a></li>
</ul>
</li>
<li class="item-109"><a href="/index.php/zdravstvena-psihoterapija" >Zdravstvena psihologija</a></li>
<li class="item-114 deeper parent"><a href="/index.php/ponudba" >Ponudba</a>
<ul class="nav-child unstyled small">
<li class="item-117"><a href="/index.php/ponudba/podmeni-2" >Podmeni 2</a></li>
<li class="item-118"><a href="/index.php/ponudba/podmeni-3" >Podmeni 3</a></li>
<li class="item-119"><a href="/index.php/ponudba/podmeni-4" >Podmeni 4</a></li>
</ul>
</li>
<li class="item-139 deeper parent"><span class="nav-header">Ostalo</span>
<ul class="nav-child unstyled small">
<li class="item-138"><a href="/index.php/ostalo/aktualno" >Arhiv novic</a></li>
<li class="item-116"><a href="/index.php/ostalo/povezave" >Povezave</a></li>
<li class="item-115"><a href="/index.php/ostalo/kontakt" >Kontakt</a></li>
</ul>
</li>
So, the items I want to change are those with .deeper.parent class.
The CSS code I wanted to apply but doesn't work:
#navigation .parent {
padding:37px 22px 37px 8px !important;
background-image: url(../images/more.png) !important;
background-position: right !important;
background-repeat: no-repeat !important;
}
I also tried changing #navigation .parent to #navigation .deeper.parent and to #navigation li.item-108.deeper.parent as well. Nothing really works. Any ideas? Thanks!
I'm assuming some coding here for display purposes, but what you want here is this part:
#navigation li.parent { padding:37px 22px 37px 8px !important; background:url(http://upload.wikimedia.org/wikipedia/commons/f/f7/Arrow-down-navmenu.png) no-repeat right center}
You can see fiddle and the adjust at will (REMEMBER: I'm assuming your code so you'll have to adjust it to your real code!)
Firstly, ensure you actually have the #navigation ID assigned to your <ul> like so:
<ul id="navigation">
Secondly, make sure you do not target menu items based on their item number, such as .item-108. These are assigned by Joomla and may change in the future.
Ok, so as you mentioned, you want to target menu items with the deeper and parent classes, for this, you can use the following:
.deeper.parent a {
background: url(../images/more.png) no-repeat;
background-position: right center;
height: 12px;
}
Note that I have used right center to define the X and Y axis, and also defined the height of the image, which may be different for you.
Hope this helps
Related
I have a nav block. This nav block contains two different kinds of links. Local links and Social links. The local links need a margin-bottom while the social links need a margin-right.
To apply the margins, would I have to add modifiers on the links? If so, what would be the best name for these two modifiers?
.nav__item--locals {
margin-bottom: 10px;
}
.nav__item--socials {
margin-right: 20px;
}
<nav class="nav">
<ul class="nav__locals">
<li class="nav__item--locals"></li>
<li class="nav__item--locals"></li>
<li class="nav__item--locals"></li>
<li class="nav__item--locals"></li>
</ul>
<ul class="nav__socials">
<li class="nav__item--socials"></li>
<li class="nav__item--socials"></li>
<li class="nav__item--socials"></li>
</ul>
</nav>
As of,
CSS Tricks AND
BEM's Website (mainly)
From Key-Val Modifiers,
Used when the modifier value is important. For example, "a menu with the islands design theme": menu_theme_islands.
The structure of the modifier's full name follows the pattern:
block-name_modifier-name_modifier-value
block-name__element-name_modifier-name_modifier-value
So, I think You should use this type of name,
.nav__item_lnk-type_locals
.nav__item_lnk-type_socials
I've got a 3-level menu generated by CMS (Joomla to be exact), which looks something like this:
<ul class="nav menu">
<li class="item-108">1-level-1</li>
<li class="item-124">1-level-2</li>
<li class="item-125 active deeper parent">1-level-3
<ul class="nav-child unstyled small">
<li class="item-164">2-level-1</li>
<li class="item-165">2-level-2</li>
<li class="item-166 current active deeper parent">
2-level-3
<ul class="nav-child unstyled small">
<li class="item-212">3-level-1</li>
<li class="item-213">3-level-2</li>
</ul>
</li>
<li class="item-210">2-level-3</li>
<li class="item-211">2-level-4</li>
</ul>
</li>
<li class="item-126">1-level-4</li>
</ul>
What I need is to force it to behave like a menu for example from this site: http://wachtel.de/backoefen/etagenoefen.html - I mean display every nested level in a separate box under it's parent.
I'm having trouble achieving it in pure CSS, so before I loose my mind, I'd like to ask you: Can it even be done, or do I need to use JS?
EDIT:
So far I've tried to make the prime UL relative and sub-ULs absolute with "left: 0" and "width: 100%", but it doesn't seem to work.
EDIT2:
Problem was caused by bootstrap.css property .nav > li {position: relative}, which was ruining the layout.
All you need in your case is some positioning. Position the .nav relatively, then you can absolutely position the .nav-childs accordingly. I inserted a minimal example for you - I'm sure you can figure out the hide/show stuff on hover by yourself.
.nav.menu{
position:relative; /* positioning the base element*/
}
li{
float:left; /* aligning the list node */
/* the rest is presentational stuff: */
list-style:none;
background-color:#ddd;
border:1px solid #aaa;
}
li a{
text-decoration:none;
}
.nav-child{
/* the important part:*/
position:absolute; /* absolute positioning*/
left:0; /* left according the the root element*/
/* the top positioning stays untouched! */
}
<ul class="nav menu">
<li class="item-108">1-level-1</li>
<li class="item-124">1-level-2</li>
<li class="item-125 active deeper parent">1-level-3
<ul class="nav-child unstyled small">
<li class="item-164">2-level-1</li>
<li class="item-165">2-level-2</li>
<li class="item-166 current active deeper parent">
2-level-3
<ul class="nav-child unstyled small">
<li class="item-212">3-level-1</li>
<li class="item-213">3-level-2</li>
</ul>
</li>
<li class="item-210">2-level-3</li>
<li class="item-211">2-level-4</li>
</ul>
</li>
<li class="item-126">1-level-4</li>
</ul>
I am not able to align the dropdown to the center of the parent on which the dropdown is opened with hover. I have tried to text-align: center for the entire .nav .navbar li elements, and it doesn't work. I have tried to set margin and left: 50% for the entire ul.dropdown-menu that is the dropdown and it doesn't work. Here is the html code:
<ul class="nav navbar-nav navbar-right" id="headerDropdowns">
<li><div class="btn-toolbar">
<div class="btn-group">
<button class="btnCustom" data-toggle="dropdown" data-hover="dropdown" data-delay="1000">Our Difference</button>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Made in the USA</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Human Grade</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Ingredients Fresh</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">USDA Meats</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Our Story</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Campare</a></li>
</ul>
</div>
</li>
</ul>
In which class dropdown-menu, or nav navbar-nav, should I do the aligment, and what should I set?
You can use transform to avoid having to use fixed widths:
.dropdown-menu {
left: 50%;
right: auto;
text-align: center;
transform: translate(-50%, 0);
}
Answer influenced by http://css-tricks.com/centering-percentage-widthheight-elements/
You can do this as long as you're willing to give the dropdown ul a fixed width. See code below:
.dropdown{text-align:center;}
.button, .dropdown-menu{margin:10px auto}
.dropdown-menu{width:200px; left:50%; margin-left:-100px;}
First 2 declarations are for visualization purposes, but the important part is the 3rd line. You'll need to define a width (in this case 200px) and then a margin-left equal to half the width. This will work with any width, no matter if the button is at the right, left or between elements (but of course you'll probably need some space for the button element)
You can see a fiddle here
The only, ugly way is to set the position depending on your needs like:
.dropdown-menu{
right: -25px !important;
}
Fiddle
But thas not the way it should be used. Keep in mind that you have to adjust the setting for all media devices.
This is what did the trick for me:
.dropdown-menu{
left: -25% !important;
}
You might need to adjust the percentage value depending on your dropdown-menu's padding etc.
For the navigation on a website I am making I am using a side bar that is set up using an unordered list. There are also multiple lists inside of lists. I used multiple div's too. I have now run into the issue that form inside of a div I need to set up some code that will contradict the div that it is in. In my case I have css of line-height: 35px; I need to edit this to become 15px.
Here is the code i need to edit it is the center( sub List )
<li>
<h2> Tech Ed. Classes</h2>
</div>
<div id="sidebarLinks"><!-- USE THIS DIV SECTION FOR A LIST WITH BULLET POINTS -->
<ul>
<li><strong><em>Main Page</em></strong></li>
<li>Construction</li>
<li>Drafting</li>
<li>Electronics</li>
<ul id="subList">
<li >INTRODUCTION TO ELECTRONICS</li>
<li>EXPLORING CAREERS IN ELECTRONICS</li>
</ul>
<li>Graphic arts </li>
<li>Manufacturing</li>
<li>Project Lead the Way</li>
<li>Transportation, Distribution, & Logitstics</li>
<li>Wood Working</li>
</ul>
</div>
</li>
You can do this simply by adding a css class to the elements you want to change to be different from the div they are in. For example:
li {
line-height: 35px;
}
.smaller {
line-height: 15px;
}
This CSS will make the line-height on all <li> elements equal to 35px, except for <li> elements with a class of smaller. Those will have a line-height of 15px. For example:
<ul>
<li>This will have a line height of 35 pixels.</li>
<li class="smaller">This will have a height of 15 pixels.</li>
</ul>
<ul class="smaller">
<li>This will have a line height of 15 pixels, the ul has a class of smaller.</li>
<li class="smaller">This will have a height of 15 pixels as well.</li>
</ul>
JSFiddle
I would suggest adding a more specific selector for the inner list. This method would not require any changes to your existing markup:
#sidebarLinks {
line-height: 25px;
}
#sidebarLinks #subList {
line-height: 15px;
}
Here is a fiddle demonstrating the above selectors: JSFiddle
Consider my html as follows:
<ul id="menu">
<li class="highlighted" id="first_item">Home</li>
<li class="non_selected_tabs">Join</li>
<li class="non_selected_tabs">Fixtures</li>
<li class="non_selected_tabs">Our Club</li>
<li class="non_selected_tabs">History</li>
<li id="hover" class="non_selected_tabs">Club Gear</li>
</li>
</ul>
My lists are styled as tabs, and I have my anchors as their parents so that when a user hovers over a tab it becomes selectable
My issue is that I was hoping to use a:hover, or the other anchor properties to change the background colour of my list item...is this possible using CSS?
I can't get it to work so I'm thinking I may have to use some JavsScript?
Wrapping the <li>'s in <a> is improper HTML and may not render properly in all browsers. A better solution would be to set the display property of the anchor to display:inline-block. Then you will be able to set the width and height of the anchor to the width and height of the li's. This way you can also use the hover property of the anchors.
<ul id="menu">
<li class="highlighted" id="first_item">Home</li>
<li class="non_selected_tabs">Join</li>
<li class="non_selected_tabs">Fixtures</li>
<li class="non_selected_tabs">Our Club</li>
<li class="non_selected_tabs">History</li>
<li id="hover" class="non_selected_tabs">Club Gear</li>
</ul>
#menu li a
{
display: inline-block;
width: 100%;
height: 100%;
}
#menu li a:hover
{
background-color:red;
}
The direct children of a ul element should only ever be list items elements, not an a.
You could either use :hover on the li element it's self, this works in browsers that aren't IE, maybe even IE8 and up..
Or you could style the a to take up the entire space area of the li, and style the li to be inline, so not to display as a typical list.
You can use :hover on other elements, not just anchors.