Trying To Find Dot Menus Like This

Hi

I am trying to find menus like this - http://codepen.io/JanIdsinga/pen/rFCvy - This example seems a bit ‘jerky’ though.

I have attached how I need the menu to look.

I was wondering if anyone knew of similar menus to the example in terms of functionality?

Many Thanks

That’s a relatively simple menu. The circle is the only tricky part, which can be achieved using the ::before or ::after pseudo element with a border-radius.

Do you have an attempet worked up?

Here’s my attempt :smile:

4 Likes

Great thanks Paul, that is so much smoother than the example I gave.

Thanks again.

Hi Paul

I have added list items to the anchor tags and the dot has stopped moving now? Any ideas as to why, below is my updated code:

.menu {
    padding: 0;
    margin: 0;
    display: inline-block;
    position: relative;
    top: 2px;
}
.menu li {
    float: left;
    margin-right: 0;
    padding:0;
    position: relative;
}
.menu li:last-child {
    margin-right: 0px;
}
.menu li a {
    color: #fff;
    display: inline-block;
    font-weight: 400;
    font-size: 18px;
    letter-spacing: 0;
    line-height: 14px;
    text-transform:none;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    transition: all .5s ease;
}
.menu li a:hover {
    color: #8ac4e5;
}
.menu:before{
    content:"";
    position:absolute;
    bottom:40px;
    left:0;
    right:40px;
    height:1px;
    background:#8ac4e5;
}
.dot{
    display:block;
    padding:0;
    position:absolute;
    bottom:20px;
    left:0;
    right:auto;
    height:14px;
    width:14px;
    bottom:13px;
    border-radius:50%;
    margin-left:0;
    background:#fff;    
    -webkit-transition:left 1s ease;
    -moz-transition:left 1s ease;
    transition:left 1s ease;
}
.menu li a.home:hover ~ .dot,
.menu li a.home.current ~ .dot,
.menu li a.home:focus ~ .dot{left:9%;}

.menu li a.features:hover  ~ .dot,
.menu li a.features.current  ~ .dot,
.menu li a.features:focus  ~ .dot{left:26%;}

.menu li a.support:hover  ~ .dot,
.menu li a.support.current  ~ .dot,
.menu li a.support:focus  ~ .dot{left:42%;}

.menu li a.pricing:hover  ~ .dot,
.menu li a.pricing.current  ~ .dot,
.menu li a.pricing:focus  ~ .dot{left:57%;}

.menu li a.blog:hover  ~ .dot,
.menu li a.blog.current  ~ .dot,
.menu li a.blog:focus  ~ .dot{left:74%;}

.menu li a.contact:hover  ~ .dot,
.menu li a.contact.current  ~ .dot,
.menu li a.contact:focus  ~ .dot{left:90%;}
<ul class="menu">
                            <li><a href="#" class="home current">Home</a></li>
                            <li><a class="features" href="#">Features</a></li>
                            <li><a class="support" href="#">Support</a></li>
                            <li><a class="pricing" href="#">Pricing</a></li>
                            <li><a class="blog" href="#">Blog</a></li>
                            <li><a class="contact" href="#">Contact</a></li>
                            <span class="dot"></span>
                        </ul>

Many Thanks

It stops working because the code Paul gave looks for the span dot to be an adjacent child to the span. You see how before, he had a,a,a,a,a,a,.dot? All adjacent children.

Paul is using using semantically correct HTML. Could you not just keep it? Otherwise, it gets very tricky due to the HTML structure.

Off Topic:

I Could play with that all day…just keep waving the mouse back and forth and watching the dot move. Reminds me of when we play with our dogs and multiple people have toys they want. Get the same kind of confused wiggle. :dog:

3 Likes

As Ryan said it gets more complicated with a list and you lose some of the accessibility aids such as tab and focus and the code becomes a little more complicated.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
.menu{
	margin:20px auto;
	padding:0 20px;
	list-style:none;
	position:relative;
	display:table;
	width:100%;
	table-layout:fixed;
	max-width:980px;
	min-width:650px;
	font-family:Arial, Helvetica, sans-serif;
	overflow:hidden;
	background-image: -webkit-gradient(
	linear,
	left top,
	left bottom,
	color-stop(0, #1A7CC2),
	color-stop(1, #2893D1)
);
background-image: -o-linear-gradient(bottom, #1A7CC2 0%, #2893D1 100%);
background-image: -moz-linear-gradient(bottom, #1A7CC2 0%, #2893D1 100%);
background-image: -webkit-linear-gradient(bottom, #1A7CC2 0%, #2893D1 100%);
background-image: -ms-linear-gradient(bottom, #1A7CC2 0%, #2893D1 100%);
background-image: linear-gradient(to bottom, #1A7CC2 0%, #2893D1 100%);	
}
.menu li{
	font-size:140%;
	color:#fff;
	display:table-cell;
	text-align:center;
	width:16.6%;
	padding:20px 0 50px;
}
.menu a,
.menu a:visited{color:#fff;text-decoration:none;display:block}

.menu:before{
	content:"";
	position:absolute;
	bottom:20px;
	left:20px;
	right:20px;
	height:1px;
	background:#fff;
}
.menu .dot{
	display:block;
	padding:0;
	position:absolute;
	bottom:20px;
	left:0;
	right:auto;
	height:14px;
	width:14px;
	bottom:13px;
	border-radius:50%;
	margin-left:0;
	background:#fff;	
	-webkit-transition:left 1s ease;
	-moz-transition:left 1s ease;
	transition:left 1s ease;
}
.menu .home:hover ~ .dot,
.menu .home.current ~ .dot,
.menu .home:focus ~ .dot{left:9%;}

.menu .features:hover  ~ .dot,
.menu .features.current  ~ .dot,
.menu .features:focus  ~ .dot{left:26%;}

.menu .support:hover  ~ .dot,
.menu .support.current  ~ .dot,
.menu .support:focus  ~ .dot{left:42%;}

.menu .pricing:hover  ~ .dot,
.menu .pricing.current  ~ .dot,
.menu .pricing:focus  ~ .dot{left:57%;}

.menu .blog:hover  ~ .dot,
.menu .blog.current  ~ .dot,
.menu .blog:focus  ~ .dot{left:74%;}

.menu .contact:hover  ~ .dot,
.menu .contact.current  ~ .dot,
.menu .contact:focus  ~ .dot{left:90%;}
</style>


</head>

<body>
<ul class="menu">
		<li tabindex="0" class="home current"><a href="#" >Home</a></li>
		<li tabindex="0" class="features"><a href="#">Features</a></li>
		<li tabindex="0" class="support"><a href="#">Support</a></li>
		<li tabindex="0" class="pricing" ><a href="#">Pricing</a></li>
		<li tabindex="0" class="blog"><a  href="#">Blog</a></li>
		<li tabindex="0" class="contact" ><ahref="#">Contact</a></li>
		<li class="dot"></li>
</ul>


</body>
</html>
1 Like

I tried using a PHP array to hold the values and discovered a novel feature… once the item is selected the only way to return to the previous item is hard reset CTLR-F5 or to start again at Home :smile:

Demo: Button Menu with Dots (source code included)

Thanks guys for all your help, I will see if I can use this without adding to a list item.

Well spotted there is specificity issue on the current item.

That section of code needs to be this:

.menu .home:hover ~ .dot,
.home.current ~ .dot,
.menu .home:focus ~ .dot{left:9%;}

.menu .features:hover  ~ .dot,
.features.current  ~ .dot,
.menu .features:focus  ~ .dot{left:26%;}

.menu .support:hover  ~ .dot,
.support.current  ~ .dot,
.menu .support:focus  ~ .dot{left:42%;}

.menu .pricing:hover  ~ .dot,
.pricing.current  ~ .dot,
.menu .pricing:focus  ~ .dot{left:57%;}

.menu .blog:hover  ~ .dot,
.blog.current  ~ .dot,
.menu .blog:focus  ~ .dot{left:74%;}

.menu .contact:hover  ~ .dot,
.contact.current  ~ .dot,
.menu .contact:focus  ~ .dot{left:90%;}

Codepen updated :smile:

1 Like

Thank you, I will use this in my next update, with a reference of course :slight_smile:

Hi Paul

I have updated my page (work in progress!) - http://cre8tivesource.co.uk/test/menu.htm

On the class - .menu .dot{ - You have two bottom properties is this correct?

Also the nav links do not appear to be equally spaced, is this because you added - ‘display:table-cell;’

If possible I would prefer to remove this and the width percentage and perhaps use padding to space out the nav links?

What do you think?

Thanks again.

Only the last in sequence will be applied. The first one should have been removed during testing and can safely be removed as it has no effect or use.

On the contrary the nav elements are exactly equal because I used table-layout:fixed on the display:table-rule which ensures that all the nav elements are exactly the same width. Otherwise in a fluid layout there would be no way to make them the dots match up to the menu items easily.

Using display:table-cell ensures that you don’t need padding to space the cells out which means that you don’t run into the issue of running out of space until absolutely needed unlike padding which will break as soon as text + padding = available width. Indeed you may find that using padding your nav is already on two lines in some browsers because they render text wider than others and there can be up to 50px difference in length over the width of a menu. It’s one of the major mistakes I see all the time where people expect text + padding to equal the same width cross browser. The display table approach negates this completely.

If you look at your original example the nav is a fixed width and used fixed px widths for all the co-ordinates which means it can’t be used in a responsive layout and won’t work if the user changes font-size.

If you want different widths in a fluid layout then you will need to give each cell a specific percentage width (add a class to each menu item and make it the width you need) and make sure they all add up to 100% and then you can change the percentage widths in the dot styles to match.

If you are creating a fixed width menu then you can use fixed measurements but I would reccomend ems rather than pc.

Hi Paul

I definitely want the menu to be responsive. You said my current example has a fixed width? I don’t see that?

I used the code you gave originally, or have I removed something?

Your comments about using display:table I will take on board for the future.

So as it stands is my example OK, or do I need to adjust anything, I know I have not aligned the dots properly yet.

Thanks for taking the time, much appreciated.

I was referring to the original codepen you linked to which was a fixed width :smile:

As I mentioned above you can change the width of each of the cells but you will need to give each item a class and a special width etc.

You will probably have to set up a hamburger menu or similar for small screen as the menu can only collapse so far,

Hi @PaulOB,

I managed to update one of my sites with the Dot Menu and delighted to say that it passes the dreaded Google Mobile Friendly Test

I tested numerous browsers and Opera was the only one where the dot did not align properly but anyone who uses Opera must be willing to expect idiosyncrasies :smile:

Many thanks once again.

Yes the problem in Opera is that although it moves the dot absolutely it still thinks its a table-cell and allocates room on the row for the extra cell resulting in a space at the end on the menu.

You could instead use display:inline-block instead of table-cell and opera will work but you will need to kill the white-space gap in inline-blocks. Or just float the items as they each have a width anyway.

However, you lose the benefits of the equal height effect of table-cells although in this specific example that won’t be an issue.

For smaller screens I would make each item display block so that it displays vertically and maybe move the dot form a horizontal dot to a dot on a vertical line at the side of the menu. (If I had time I would do a demo but have some work to do today :))

I’d have thought that since Opera uses the exact same rendering engine as Chrome that there wouldn’t be any more idiosyncrasies - or did you mean some long dead prior version of Opera from over 15 versions in the past - the latest Opera version is version 30.

I tried Opera on the iPad Mini 2 Tablet and it worked fine.

Tried latest Opera on LinuxMint 17.1 and the problem still exists.

About Opera
Version information
Version
12.16
Build
1860
Platform
Linux
System
x86_64, 3.13.0-37-generic
Browser identification

Opera/9.80 (X11; Linux x86_64; Edition Linux Mint) Presto/2.12.388 Version/12.16

Did you try the link?

Edit:
I checked for updates and Opera said that I had the latest version?

I then went onto the Opera site and downloaded the latest version:

Opera 30.0

Made to discover

Version information

Version: 30.0.1835.59 - Opera is up to date
Update stream: Stable
System: Ubuntu 14.04.1 LTS (x86_64; KDE)
Browser identification

Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.81 Safari/537.36 OPR/30.0.1835.59

Opera is now working OK. I am most confused with the previous version stating that I had the latest version?