How can I create grey rectangular hover effects like those seen in Office 365?

I found a fiddle http://jsfiddle.net/HEue6/1/ that seems like a good starting point, but I want to make it look and feel more like Office 365. I believe the font used in Office 365 is Segoe UI Semilight, but there are also mentions of the Google font Raleway and another font called Futura. Additionally, I would like to incorporate the grey rectangular box effect that Office 365 has for marking selected areas.

Can someone provide guidance on how to achieve this? Is the correct font selection enough to make it similar to Office 365, or are there other adjustments needed? How can I implement the grey rectangle for highlighting a selected element?

<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
    <title>-Register</title>

    <script src="/scripts/jquery/jquery-1.9.1.js" type="text/javascript"></script>

    <script src="/scripts/application.js" type="text/javascript"></script>
    <link href="/css/style.css" rel="stylesheet" type="text/css">
    <link href="http://fonts.googleapis.com/css?family=Raleway:400,200" rel="stylesheet" type="text/css">
</head>
<body>


<div id="header">
    <div id="header-title">Account Administration</div>
</div>
<hr />

<div id="navigation-bar">
    <div id="navigation-content">

        <!-- SINGLE BUTTON MODULE -->  <a href="/admin/adduser">
        <div class="navigation-button">
            <div class="navigation-header">Add new account</div>
            <div class="navigation-desc">Add new user account</div>
        </div></a>

        <!-- SINGLE BUTTON MODULE -->
        <a href="/admin/search"><div class="navigation-button">
            <div class="navigation-header">Search account</div>
            <div class="navigation-desc">Search and manage accounts</div>
        </div></a>


        <!-- SINGLE BUTTON MODULE -->
        <a href="/admin/export"><div class="navigation-button">
            <div class="navigation-header">Export</div>
            <div class="navigation-desc">Export to Excel and other formats</div>
        </div></a>

        <!-- SINGLE BUTTON MODULE -->

        <form id="inputForm" role="form" class="marg-left" action="/admin/import" method="post" enctype="multipart/form-data">

        <input id="upload" name="file" type="file" onchange="this.form.submit();"/><a href="" id="upload_link"><div class="navigation-button">
            <div class="navigation-header">Import</div>
            <div class="navigation-desc">Import from tab-separated files on disk</div>
        </div>   </a>

        </form>

        <!-- SINGLE BUTTON MODULE -->
<a href="/admin/setup"> <div class="navigation-button">
            <div class="navigation-header">Setup</div>
            <div class="navigation-desc">Setup global parameters</div>
        </div></a>

        <!-- SINGLE BUTTON MODULE -->
<a href="j_spring_security_logout"><div class="navigation-button" id="logga">
            <div class="navigation-header">Logout</div>
            <div class="navigation-desc">Exit account administration</div>
        </div></a>

    </div>
</div>
</div>
</body>
</html>
javascripthtmlcss

Answer №1

Here is a snippet of code that offers a quick and simple implementation:

FIDDLE

body {
    font-family:'Raleway', sans-serif;
}
#header {
    width: 100%;
    position: fixed;
    height: 45px;
    border-bottom: solid 2px #0072c9;
    background-color: #FFFFFF;
    z-index: 30;
}
#header-title {
    left: 250px;
    font-size: 22px;
    bottom: 7px;
    color: #0072c9;
    font-weight: 400;
    position: absolute;
}
#navigation-bar {
    width: 230px;
    height: 100%;
    box-shadow: 0 0 8px 6px rgba(0, 0, 0, 0.2);
    z-index: 20;
    position: absolute;
}
#navigation-content {
    width: 100%;
    height: auto;
    position: absolute;
    top: 47px;
}
.navigation-button {
    position: relative;
    width: 100%;
    height: 80px;
    margin: 15px 0px;
}
.navigation-header {
    position: absolute;
    top: 15px;
    left: 10px;
    color: #0072c9;
    font-size: 25px;
}
.navigation-desc {
    position: absolute;
    bottom: 15px;
    left: 10px;
    font-size: 12px;
    color: #0072c9;
}
#logout {
    border-top: solid 2px #0072c9;
}
#navigation-content a:hover div.navigation-button {
    background:lightgrey;
}
#navigation-content a:hover div.navigation-button:before {
    content:' ';
    display:block;
    position:absolute;
    right:-20px;
    top:15px;
    height:30px;
    width:30px;
    background:white;
    -webkit-transform-origin: 5px 25px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilize the request object from Express within a Mongoose Plugin

I have incorporated an API in ExpressJS along with a middleware that runs before each endpoint controller: app.use(segregationMiddleware); app.get('/some-endpoint', controller1); app.get('/some-endpoint-2', controller2); The segregat ...

javascriptnode.jsexpressmongoose

Parsing JSON data received through a URL using Ruby

When attempting to send a JSON object from JavaScript to Ruby, I am encountering issues with parsing it in Ruby. Despite trying various methods and conducting extensive research, I have not been able to find a solution. It is important to note that I am r ...

javascriptrubyjsonurl

Handling form submissions in Vue.js before navigating away from the current route

As a newcomer to VueJs, I am facing a problem with creating a form. My goal is to display an alert dialog with the message "you might lose the data, please save the data before you leave," and upon clicking 'yes', the form should be submitted and ...

javascriptvue.jsvue-router

Adjusting Picture Sizes to Fit the Dimensions of a Photo Frame

Currently, I am in the process of developing a website that incorporates two distinct image types: Portrait photos https://i.sstatic.net/rmIXQ.jpg Landscape photos https://i.sstatic.net/Z7mr3.jpg As you can see, there are two different categories of ...

javascriptphpjqueryhtmlcss

'Error: Object does not have access to the specified property or method 'values'

I've been working on writing some code to retrieve and read a JSON file. It seems to work fine in Chrome, but I'm running into issues with IE11, which is the browser I need to use. I've tried changing variable names, but the problem persists ...

javascripthtml

The function is not defined... HOWEVER... it functions perfectly in a separate demo file

I have been attempting to implement a similar effect found here: . It's a responsive popup that can display content on demand. Initially, I have jquery 2.0.2 and jquery-ui included in my <head> section, which are loading successfully. Then ...

jqueryhtmlfunctionundefined

Guide on importing a Blender scene into three.js with textures, lighting, and camera

I successfully exported a single object (box.json) and scene (box2.json) from Blender using io_three. Additionally, I was able to load a single object (box.json) with textures using JSONLoader() in the modelWithTexture.html file. My goal is to load an ent ...

javascriptthree.jsblender

AngularJS Error: $element.find(...) does not support iteration

I'm attempting to utilize a datatable in my AngularJS application. Below is the HTML code I've implemented: <div ng-app="datatable"> <div ng-controller="voucherlistcontroller"> ...

javascriptangularjsspring-bootdatatables

Tips for implementing personalized command buttons in Kendo Grid with AJAX request utilizing JavaScript

I am struggling with implementing custom command buttons in a Kendo grid that makes an AJAX call using JavaScript to call a web API post action with dynamic parameters (start, stop, restart) behind button clicks. datasource dataSource = new ken ...

javascriptjqueryajaxtelerikkendo-grid

Exploring the world of design patterns using three.js and webpack

Looking to improve the organization of my code with three.js and webpack rather than having everything in a single file (like camera, meshes, lights, postprocessing, etc). I had the idea of using "manager modules" such as a LightManager class or a PostPro ...

javascriptdesign-patternswebpackthree.js

Setting a background image for your Ionic page

I am relatively new to using Ionic and I'm currently working on setting up a gradient image as the background for the welcome page of my app. While I've been successful in loading images from the assets/imgs folder on other pages, I'm facing ...

htmlcssionic-framework

Discover techniques for concealing the source code of AngularJS controllers on a web browser

Our current setup involves using angular JS with spring boot, and although everything is running smoothly, we are facing an issue regarding the separation of our UI deployment location from where the Java code resides. This has led to a situation where upo ...

javascriptjavaangularjsspring-boot

Is there a way to prevent one accordion pattern from automatically closing when another one is opened?

I'm currently working on a code that involves accordion patterns, and I've encountered an issue where opening and closing one accordion automatically closes another. I want all accordions to remain open until the user explicitly clicks to close t ...

htmlcssbootstrap-4

Ways to avoid data looping in jQuery Ajax requests

This is in relation to the assignment of multiple users using the Select2 plugin, Ajax, and API. The situation involves a function that contains 2 Ajax calls with different URLs. Currently, there are pre-selected users stored in the database. The selection ...

javascriptjqueryhtmlajaxjquery-select2

Displaying a clock using PHP

Seeking a way to display server time on my website, I have successfully implemented client-side time using JavaScript. How can I now showcase the server time? Are there any ZendFramework classes that can assist with this? Currently, I am utilizing the fo ...

phpjavascriptjqueryajax

Are there any quicker methods to surrender to the Javascript event loop other than using setTimeout(0)?

Attempting to create a web worker that can pause during computation is proving to be challenging. As of now, the only method I am aware of (aside from using Worker.terminate()) involves periodically allowing the message loop to check for any incoming messa ...

javascriptsettimeoutweb-workerevent-loop

Steps for dynamically adding a form-row within a form

Here is a form that I need help with. <form action="{{route('order.store')}}" method="post"> @csrf <div class="form-row"> <div class="col-6" ...

javascriptphphtmllaravel

What is the best way to merge multiple arrays nested within another array while removing the final character from each word?

We have a 2D array: let userGroup = [ ['user1-', 'user2-', 'user3-'], ['user4-', 'user5-', 'user6-'], ['user7-', 'user8-', 'user9-'] ]; How can we c ...

javascriptarraysfunction

Convert a string into HTML text using regular expressions

How can you correctly transform a string such as this: html attr = "value" attr2 = 'UnmatchInSubstrings' some \escapedTag content subtag subcontent /subtag br / /html into: <html attr = "value" attr2 = 'UnmatchInSubstrings'&g ...

javascripthtmlregexstringtags

Tips for creating text that adjusts to different screen sizes within a div

I am trying to ensure that the height on the left side matches the height on the right, so it's important that it looks good on various devices like tablets, PCs, etc. However, when I resize my browser window, the video on the right side shrinks while ...

javascriptjqueryhtmlcssresponsive-design