Add midpoint or arrow for selected menu item without pushing over

HTML & CSS
1

Hi there everyone!

This menu is in a game so I don’t have a page to display. I’m not sure if it matters but the menu entries are selectable only via arrow keys on the keyboard, there is no mouse use.

Some people using a menu I’ve created are having issues distinguishing between selected menu items so I’d like to add some type of arrow or middot but I’d like it to not push the text over( I dislike menu entry decorations that shift text) but I can’t find an example of how to pull that off. The important part of my CSS is as follows:

.menu .menu-items .menu-item {
	height: 40px;
	display: block;
	background-color: rgba(0, 0, 0, 0.6);
	-box-shadow: inset 1px 0px 0px 1px rgba(0, 0, 0, 0.6);
	height: 32px;
	line-height: 32px;
	color: rgb(255, 255, 255);
	text-align: left;
	padding-left: 20px;
}

.menu .menu-items .menu-item.selected {
	background-color: #4d4d4d38;
}

How would I get a decoration of some sort like a middot or > to the left of the selected menu entry without pushing the text to the right?

The full CSS for the menu is below:

@font-face {
	font-family: bankgothic;
	src: url('../fonts/bankgothic.ttf');
}

@font-face {
	font-family: pcdown;
	src: url('../fonts/pdown.ttf');
}

.menu {
	background-color: rgba(0,0,0,0.6);
	border-radius: 20px;
	font-family: Verdana;
	min-width: 400px;
	color: #fff;
	box-shadow: 0px 0px 50px 0px #000;
	position: absolute;
}

.menu.align-left {
	left: 40;
	top: 50%;
	transform: translate(0, -50%);
}

.menu.align-top-left {
	left: 40;
	top: 40;
}

.menu.align-top {
	left: 50%;
	top: 40;
	transform: translate(-50%, 0);
}

.menu.align-top-right {
	right: 10;
	top: 40;
}

.menu.align-right {
	right: 40;
	top: 50%;
	transform: translate(0, -50%);
}

.menu.align-bottom-right {
	right: 40;
	bottom: 40;
}

.menu.align-bottom {
	left: 50%;
	bottom: 40;
	transform: translate(-50%, 0);
}

.menu.align-bottom-left {
	left: 40;
	bottom: 40;
}

.menu.align-center {
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.menu .head {
	background-image: url(http://scotchandiron.org/assets/SImenu_bg.png);
	border-radius: 20px 20px 0px 0px;
	text-align: center;
	height: 85px;
	line-height: 40px;
}

.menu .title {
	font-weight: bold;
	text-align: center;
	overflow-y: hidden;
	padding-top: 10px;
	padding-bottom: 10px;
}

.menu .menu-items {
	max-height: 600px;
	overflow-y: hidden;
	border-radius: 0px 0px 20px 20px;
}

.menu .menu-items .menu-item {
	height: 40px;
	display: block;
	background-color: rgba(0, 0, 0, 0.6);
	-box-shadow: inset 1px 0px 0px 1px rgba(0, 0, 0, 0.6);
	height: 32px;
	line-height: 32px;
	color: rgb(255, 255, 255);
	text-align: left;
	padding-left: 20px;
}

.menu .menu-items .menu-item.selected {
	background-color: #4d4d4d38;
}

Thanks for your time!

2

Hi,

You don’t really give us enough to work with but if you want to add something without disrupting the flow then you need to position it absolutely into place.

You would need something like this but is of course dependent on your html and assumes there is space for it to fit.

.menu-item{position:relative;}
.menu-item.selected:before{
	content:"\BB";
	position:absolute;
	left:3px;
	top:0;
	font-size:.8em;
}

Run your code through the validator as you have a number of missing units on your values.:wink:

3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.