I want to separate certain elements in a dropdown menu option, with a simple solid divider. Ideally I want to have the links 'Pinterest', 'Twitter', 'Bloglovin' and 'Instagram' to appear above this divider and the link 'Email' to appear below the divider. So essentially I'm separating the first half of links from the second half with a divider.
Below is the html coding to the dropdown menu:
<li><a href='#'>Social</a>
<ul>
<li><a href='http://www.pinterest.com/blankesque'>Pinterest</a></li>
<li><a href='http://www.twitter.com/itsblankesque.com'>Twitter</a></li>
<li><a href='http://www.bloglovin.com/people/aladyinwhite-8315551'>Bloglovin</a></li>
<li><a href='http://www.instagram.com/blankesque/blankesquexo'>Instagram</a></li>
<li><a href='mailto:blankesque#hotmail.com'>Email</a></li>
</ul></li>
The link to my site is as follows - http://www.blankesque.com.
Any help with this issue would be greatly appreciated. Thank you in advance.
Iram
Just target the last <li> in the social <li>(I added the class .social to it), with :last-of-type and add a border-top
.social li:last-of-type {
margin-top: 10px;
border-top: 1px solid grey;
}
<li class="social">Social
<ul>
<li>Pinterest</li>
<li>Twitter</li>
<li>Bloglovin</li>
<li>Instagram</li>
<li>Email</li>
</ul>
</li>
Related
I need a little help here. I am trying to make a menu with submenu to be open without javascript or jquery (Only css if it is possible).
<nav id="container">
<ul>
<li>Link1</li>
<li class="haschildren selected">
<a>Link2</a>
<ul class="submenu">
<li>Link2-1</li>
<li>Link2-2</li>
<li>Link2-3</li>
</ul>
</li>
<li class="haschildren">
<a>Link3</a>
<ul class="submenu">
<li>Link3-1</li>
<li>Link3-2</li>
<li>Link3-2</li>
</ul>
</li>
</ul>
</nav>
When i have the class selected and page is loaded the .selected .submenu is open. But when i hover the other li that has submenu i want the selected submenu to disappear and the new one appear. In my case i cannot make the selected submenu hidden when hover over Link3 li.
Sorry for my english. To make it clear i would like when hover Link3 the Link2 submenu to become hidden and the Link3 submenu to open. But when hover out from Link3 to return to the default selected. If anyone could help i would appreciate it.
I made an example here. https://jsfiddle.net/ef8zgogr/
apply a display none to the .submenu's and then on :hover over the parent li (with the class of .hasChildren) change it to display block.
.submenu {display:none}
.selected ul{display:block}
#container:hover li ul{display:none}
#container li:hover ul{display:block}
<nav id="container">
<ul>
<li>Link1</li>
<li class="haschildren selected">
<a>Link2</a>
<ul class="submenu">
<li>Link2-1</li>
<li>Link2-2</li>
<li>Link2-3</li>
</ul>
</li>
<li class="haschildren">
<a>Link3</a>
<ul class="submenu">
<li>Link3-1</li>
<li>Link3-2</li>
<li>Link3-2</li>
</ul>
</li>
</ul>
</nav>
But when i hover the other li that has submenu i want the selected
submenu to disappear
there is no easy way to toggle close the selected (expanded) submenu when other submenu has been hover (more like radio button) by straight css.
I'm using a template, HTML5UP - Miniport, for my web design class - I'm just beginning to learn to code. In order to meet the specification for my class I needed to add submenus/drop-down navbar. This works fine in desktop mode, but when I decrease the size of the windows, I get some problems. The submenus stay inside the fixed navbar, pushing their way between other menus items. Here's a link to what it currently looks like:
https://jsfiddle.net/OrangeJones/9u0seLxu/
The CSS is in the fiddle link, but here's my HTML.
<div class="nav">
<ul class="container">
<li><a class="jumper home" href="#top">Home</a></li>
<li><a class="jumper about" href="#about">About</a>
<ul>
<li>Resume</li>
</ul>
</li>
<li><a class="jumper portfolio" href="#portfolio">Portfolio</a></li>
<li><a class="jumper blog" href="#blog">Blog</a>
<ul>
<li>Best of the Twin Cities</li>
</ul>
</li>
<li>
<a class="jumper contact" href="#contact">Contact</a>
</li>
</ul>
</div>
How can I get it to where the submenus drop down when hovered over or clicked on in small screens instead of taking up main navbar space.
Thank you!
Your CSS for the submenu to show and hide is inside the media query and so the dropdown elements were showing when on a screen that was smaller instead of being hidden, you also had the deceleration of the background for the submenu elements in the media query.
.nav li ul
{
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul
{
display: block;
}
.nav li ul li
{
display: block;
background-color: #282828;
}
Updated fiddle
I have a simple html menu that is styled using CSS.
<div id="menu">
<ul>
<li>Home</li>
<li>Growing Up and School</li>
<li>Films</li>
<li>James Bond</li>
<li>Pictures</li>
</ul>
</div>
What I am looking for is a way to show the user what page is currently in use by way of a coloured background on the correct bit of the navigation menu. E.g. when the user is on the career page, the li box would be a different colour to the rest of the menu to show that it is in use.
What you're going to want to do is add a class to whatever menu item is currently active. For example, the HTML markup for index.html would look like this:
<div id="menu">
<ul>
<li class="active">Home</li>
<li>Growing Up and School</li>
<li>Films</li>
<li>James Bond</li>
<li>Pictures</li>
</ul>
</div>
And the markup for career.html would look like this:
<div id="menu">
<ul>
<li>Home</li>
<li>Growing Up and School</li>
<li class="active">Films</li>
<li>James Bond</li>
<li>Pictures</li>
</ul>
</div>
Then style the class accordingly:
.active {
background-color: red;
}
You can do this by adding an'active' class.
When you are on a certain page, you will add the class="active" to your link ( or li element ) . This is how wordpress and many other web application solve this.
Look here : http://jsfiddle.net/Bm9E4/2/
On the active page, add a class of .active to the LI for that page.
<div id="menu">
<ul>
<li class="active">Home</li>
<li>Growing Up and School</li>
<li>Films</li>
<li>James Bond</li>
<li>Pictures</li>
</ul>
</div>
Then do CSS for the background:
#main li.active { background-color:red; }
I am using a WordPress theme called 'Wordpress Foundation v2 by 320press'
I am using the custom menus within the WordPress dashboard, I want to add a class to the 'li' to change the styles of the sub menus:
For Example:
About Us - will have a sub menu of four sublinks, therefore i want to add a class to that submemu called .fourNav which will then set each 'li' a with of 25%.
Then Customers - will have 2 sub links, so i want to add a class called .twoNav to each 'li' which will have a width of 50%.
I also want to add another class on top of these for each 'li' that will have a background image to each 'li'.
The Wordpress menu allows you to add classes and a description which will be displayed in the menu, but when i inspect the element the classes are not getting applied.
However when i add the class manually within the DOM it picks up the CSS and works.
How can i add the menu system to its full ability within this theme?
This is what im doing, but its not adding the class on:
http://thesis-blogs.com/add-a-custom-class-to-each-item-in-the-wordpress-menu/
So what i think i need is a snippet of php to allow the menu system to work with my theme. As when i add in the class in the dashboard my theme doesnt apply it.
This is the code that gets outputting in the html: -
<ul id="menu-main-nav" class="top-nav nav-bar hide-for-small">
<li id="menu-item-5" class="has-flyout active">
Home
<ul class="flyout" style="display: none;">
<li id="menu-item-50">sub menu four</li>
<li id="menu-item-51">sub menu three</li>
<li id="menu-item-52">sub menu two</li>
<li id="menu-item-53">sub menu one</li>
</ul>
</li>
</ul>
you have to edit the template code directly...
i think the menú is in
worpressdir/wp-content/themes/yourthemename/header.php
in order to edit this correctly you will need a medium skills with PHP and html. good luck
Go to Appearance -> Menus -> Screen options - then the following
As far as I understood from your requirements this is how it should work:
1. When you hover over a menu item, it should get a new class name.
2. When you hover over a sub-menu item, both the sub-menu item and the parent element of the corresponding sub-menu item should get a new class name.
If this is what you want checkout this jsfiddle. I have used jquery for this. Check if this helps you.
HTML:
<ul class="menu-bar">
<li class="menu-block">Menu 1</li>
<li class="menu-block">Menu 2
<ul class="sub-menu-block">
<li class="sb-menu-list">Sub Menu</li>
<li class="sb-menu-list">Sub Menu</li>
<li class="sb-menu-list">Sub Menu</li>
</ul>
</li>
<li class="menu-block">Menu 3</li>
<li class="menu-block">Menu 4</li>
<li class="menu-block">Menu 5</li>
</ul>
CSS:
.menu-bar{
background-color:blue;
width:100%;
display:inline-block;
}
.menu-bar > li{
display:inline-block;
position:relative;
}
.sub-menu-block{
display:none;
position:absolute;
top:20px;
padding-left:0;
width:75px;
padding:10px 3px;
background-color:#ccc;
}
.menu-bar > li:hover .sub-menu-block{
display:block;
}
.sub-menu-block li{
list-style: none;
display:block;
padding: 4px 0;
}
.sub-menu-block li:hover{
background-color:red;
}
JQuery
$(function(){
$(".menu-block").on("mouseover",function(){
$(this).addClass('hovered');
});
$(".menu-block").on("mouseout",function(){
$(this).removeClass('hovered');
});
$(".sb-menu-list").on("mouseover",function(){
$(this).addClass('child-hovered');
$(this).parents(".menu-block").addClass('parent-hovered');
});
$(".sb-menu-list").on("mouseout",function(){
$(this).removeClass('child-hovered');
$(this).parents(".menu-block").removeClass('parent-hovered');
});
});
I'm struggling with an issue with my drop-down menu, which is that the dropdown menu is displayed properly, but disappears once it stretches below the containing div. Here's an illustration of what i'm talking about:
The menu only extends to the height of the black containing <div>. Here's my framework:
<ul>
<li><a href=''>Menu Item</a></li>
<li><a href=''>Menu Item 2</a>
<ul class="sub_menu">
<li><a href=''>...</a></li>
<li><a href=''>...</a></li>
<li><a href=''>...</a></li>
</ul>
</ul>
Try giving your containing element an overflow property of visible.
Did you try to specify the width and height properties for your ul, and li elements yet ?