{"id":4948,"date":"2012-07-04T02:00:00","date_gmt":"2012-07-04T00:00:00","guid":{"rendered":"https:\/\/alvarotrigo.com\/epa\/designing-a-floating-window-with-tabs-css-and-jquery\/"},"modified":"2024-02-05T20:11:04","modified_gmt":"2024-02-05T19:11:04","slug":"designing-a-floating-window-with-tabs-css-and-jquery","status":"publish","type":"post","link":"https:\/\/alvarotrigo.com\/blog\/designing-a-floating-window-with-tabs-css-and-jquery\/","title":{"rendered":"Designing a floating window with tabs (CSS and jQuery)"},"content":{"rendered":"\n

In one of the last websites i had to program and design as a freelance, the client wanted a way to show the information without changing the page structure in order to make it simple for the visitor to go back to the main page.<\/p>\n\n\n\n

I came across with a simple floating window solution. I show a Photoshop sketch to the client and next day i started working on it.<\/p>\n\n\n\n

\"Floating<\/figure>\n\n\n\n
\n
See Demo<\/a><\/div>\n\n\n\n
View on GitHub<\/a><\/div>\n<\/div>\n\n\n\n

I started creating the floating window with HTML and CSS:<\/p>\n\n\n

<div<\/span> id<\/span>=\"darkOverlay\"<\/span>><\/span>\n    <div<\/span> id<\/span>=\"floatWrap\"<\/span>><\/span>\n        <div<\/span> id<\/span>=\"floatContent\"<\/span>><\/span>\n            <a<\/span> class<\/span>=\"close\"<\/span>><\/span><\/a<\/span>><\/span>\n            <div<\/span> id<\/span>=\"mainFloat\"<\/span>><\/span><\/div<\/span>><\/span>\n        <\/div<\/span>><\/span>\n    <\/div<\/span>><\/span>\n<\/div<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n
\n\/*\nIt defines the layer which will cover the site once the\nfloating window is showed.\n*\/<\/span>\n#darkOverlay<\/span>{\n    background<\/span>: none repeat scroll 0<\/span> 0<\/span> rgba<\/span>(255<\/span>, 255<\/span>, 255<\/span>, 0.8<\/span>);\n    cursor<\/span>: auto;\n    display<\/span>: block;\n    height<\/span>: 100%<\/span>;\n    left<\/span>: 0<\/span>;\n    overflow-y<\/span>: auto;\n    position<\/span>: fixed;\n    top<\/span>: 0<\/span>;\n    width<\/span>: 100%<\/span>;\n    z-index<\/span>: 100<\/span>; \/*over everything *\/<\/span>\n}\n\n\/*\nWe want the content to be center...\n*\/<\/span>\n#floatWrap<\/span>{\n    margin<\/span>: 0<\/span> auto;\n    position<\/span>: static;\n    width<\/span>: 878px<\/span>;\n    z-index<\/span>: 102<\/span>;\n}\n\n\/*\nDefining the window wrap...\n*\/<\/span>\n#floatContent<\/span>{\n    float<\/span>: left;\n    background<\/span>: white;\n    box-shadow<\/span>: 0<\/span> 3px<\/span> 8px<\/span> rgba<\/span>(34<\/span>, 25<\/span>, 25<\/span>, 0.4<\/span>);\n    z-index<\/span>: 101<\/span>; \/*over the overlay*\/<\/span>\n    margin<\/span>:80px<\/span> 0<\/span> 80px<\/span> 0<\/span>;\n    position<\/span>:relative;\n}\n\/*\nDefining the window...\n*\/<\/span>\n#mainFloat<\/span>{\n    float<\/span>: left;\n    margin<\/span>: 0<\/span>;\n    width<\/span>: 900px<\/span>;\n    min-height<\/span>: 500px<\/span>;\n    position<\/span>: relative;\n    \/*witht his background we divide visually\n    the space*\/<\/span>\n    background<\/span>: url<\/span>('imgs\/bgFloat.gif'<\/span>) repeat-y #fff<\/span>;\n}\n\n\/*\nAdding the X for closing the window\n*\/<\/span>\n.close<\/span>{\n    position<\/span>: absolute;\n    top<\/span>: -15px<\/span>;\n    right<\/span>: -15px<\/span>;\n    width<\/span>: 30px<\/span>;\n    height<\/span>: 30px<\/span>;\n    background<\/span>: transparent url<\/span>('imgs\/fancybox.png'<\/span>) -40px<\/span> 0px<\/span>;\n    cursor<\/span>: pointer;\n    z-index<\/span>: 1103<\/span>;\n    display<\/span>: inline;\n}\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Like this we should have a white floating window with a white semitransparent layout over the page.<\/p>\n\n\n\n
Then, we hide it using display:none<\/code> on #darkOverlay<\/code> and we create an event to show it when someone clicks over the selector floatMenu<\/code>.<\/p>\n\n\n
$(document<\/span>).ready(function<\/span>(<\/span>)<\/span>{\n    \/*\n    * Clicking over the .floatMenu selector, we will show the floating window.\n    *\/<\/span>\n    $('.floatMenu'<\/span>).click(function<\/span>(event<\/span>)<\/span>{\n        \/\/ Showing the floating window<\/span>\n        $('#darkOverlay'<\/span>).show();\n\n        \/\/ Hidding the background page scroll<\/span>\n        $(\"body\"<\/span>).css(\"overflow\"<\/span>, \"hidden\"<\/span>);\n    });\n});\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Then create the HTML with the selector which will allow us to show the floating window:<\/p>\n\n\n
<div<\/span> class<\/span>=\"floatMenu\"<\/span>><\/span>\n    <a<\/span> href<\/span>=\"#\"<\/span>><\/span>Click here to show the floating menu<\/a<\/span>><\/span>\n<\/div<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Fine, now we can show it. But… we can not hide it \ud83d\ude42
\nLets fix it with this:<\/p>\n\n\n
$(document<\/span>).ready(function<\/span>(<\/span>)<\/span>{\n    \/*\n    We use this to hide the floating window in case they click outside it.\n    As html will be 'everything', we will use then an stopPropagation event.\n    *\/<\/span>\n    $('html, .close'<\/span>).click(function<\/span>(<\/span>)<\/span>{\n        $('.selection'<\/span>).hide();\n        $('#darkOverlay'<\/span>).hide();\n        $(\"body\"<\/span>).css(\"overflow\"<\/span>, \"visible\"<\/span>);\n\n    });\n\n    \/*\n    Here we use the stopPropagation event in order to prevent hidding the\n    floating window when we click anywhere inside the #mainFloat element.\n    *\/<\/span>\n    $(\"#mainFloat\"<\/span>).click(function<\/span>(event<\/span>)<\/span>{\n        event.stopPropagation();\n    });\n\n    \/*\n    Adding the option to hide the windows by pressing the 'escape' (ESC)\n    key with the keyboard.\n    *\/<\/span>\n    $(document<\/span>).keyup(function<\/span>(e<\/span>) <\/span>{\n        if<\/span> (e.keyCode == 27<\/span>) {\n            $('#darkOverlay'<\/span>).hide();\n            $(\"body\"<\/span>).css(\"overflow\"<\/span>, \"auto\"<\/span>);\n        }\n    });\n\n    \/*\n    Clicking over the .floatMenu selector, we will show the floating window.\n    *\/<\/span>\n    $('.floatMenu'<\/span>).click(function<\/span>(event<\/span>)<\/span>{\n        \/\/ Showing the floating window<\/span>\n        $('#darkOverlay'<\/span>).show();\n\n        \/\/ Hidding the background page scroll<\/span>\n        $(\"body\"<\/span>).css(\"overflow\"<\/span>, \"hidden\"<\/span>);\n\n        \/* In order to prevent hidding the floating window, as we are on the 'html' element.\n        We have to stop the click event propagation so it won't reach 'html' *\/<\/span>\n        event.stopPropagation();\n    });\n});\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Everything is explained on the comments.<\/p>\n\n\n\n
Now we can hide and show it. Lets add some content and structure to the floating window. This is the final HTML content:<\/p>\n\n\n
<div<\/span> id<\/span>=\"darkOverlay\"<\/span>><\/span>\n    <div<\/span> id<\/span>=\"floatWrap\"<\/span>><\/span>\n        <div<\/span> id<\/span>=\"floatContent\"<\/span>><\/span>\n            <a<\/span> class<\/span>=\"close\"<\/span>><\/span><\/a<\/span>><\/span>\n            <div<\/span> id<\/span>=\"mainFloat\"<\/span>><\/span>\n                <div<\/span> id<\/span>=\"menuLeft\"<\/span>><\/span>\n                    <ul<\/span>><\/span>\n                        <li<\/span> class<\/span>=\"active\"<\/span>><\/span><a<\/span> class<\/span>=\"floatCategory\"<\/span> href<\/span>=\"#\"<\/span> data-content<\/span>=\"Hello world\"<\/span>><\/span>Option 1<\/a<\/span>><\/span><\/li<\/span>><\/span>\n                        <li<\/span> class<\/span>=\"\"<\/span>><\/span><a<\/span> class<\/span>=\"floatCategory\"<\/span> href<\/span>=\"#\"<\/span> data-content<\/span>=\"Bye bye\"<\/span>><\/span>Option 2<\/a<\/span>><\/span><\/li<\/span>><\/span>\n                        <li<\/span> class<\/span>=\"\"<\/span>><\/span><a<\/span> class<\/span>=\"floatCategory\"<\/span> href<\/span>=\"#\"<\/span> data-content<\/span>=\"Car\"<\/span>><\/span>Option 3<\/a<\/span>><\/span><\/li<\/span>><\/span>\n                        <li<\/span>><\/span><a<\/span> class<\/span>=\"floatCategory\"<\/span> href<\/span>=\"#\"<\/span> data-content<\/span>=\"Steve Jobs\"<\/span>><\/span>Option 4<\/a<\/span>><\/span><\/li<\/span>><\/span>\n                    <\/ul<\/span>><\/span>\n                <\/div<\/span>><\/span>\n                <div<\/span> id<\/span>=\"infoContent\"<\/span>><\/span>\n                <\/div<\/span>><\/span>\n            <\/div<\/span>><\/span>\n        <\/div<\/span>><\/span>\n    <\/div<\/span>><\/span>\n<\/div<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
As we can see, we added some tabs and a DIV for the window content.
\nThe active tab will use `class=”active”.<\/p>\n\n\n\n
For this HTML, we add the following CSS:<\/p>\n\n\n
\/* Left tabs menu*\/<\/span>\n#menuLeft<\/span>{\n    float<\/span>:left;\n    width<\/span>:223px<\/span>;\n    margin<\/span>:90px<\/span> 0<\/span> 0<\/span> 0<\/span>;\n}\n#menuLeft<\/span> ul<\/span>{\n    margin<\/span>: -10px<\/span> 0<\/span> 0<\/span> 0<\/span>;\n    float<\/span>: left;\n    list-style<\/span>: none outside none;\n    padding<\/span>: 0<\/span>;\n    width<\/span>: 100%<\/span>;\n}\n#menuLeft<\/span> li<\/span>{\n    border-bottom<\/span>: 1px<\/span> solid #DDD<\/span>;\n    float<\/span>: left;\n    padding<\/span>: 0<\/span> 0<\/span> 0<\/span> 12px<\/span>;\n    width<\/span>: 190px<\/span>;\n    margin<\/span>: 0<\/span> 10px<\/span> 0<\/span> 10px<\/span>;\n}\n#menuLeft<\/span> ul<\/span> li<\/span> a<\/span>{\n    color<\/span>: #333<\/span>;\n    display<\/span>: block;\n    padding<\/span>: 18px<\/span> 0<\/span>;\n    text-decoration<\/span>: none;\n    width<\/span>: 204px<\/span>;\n    font-size<\/span>:1.2em<\/span>;\n}\n#menuLeft<\/span> a<\/span>:hover<\/span>{\n    text-decoration<\/span>:none;\n}\n#menuLeft<\/span> .active<\/span>,\n#menuLeft<\/span> .active<\/span>:hover<\/span> {\n    background<\/span>: #fff<\/span>;\n    width<\/span>: 194px<\/span>;\n    border<\/span>: 1px<\/span> solid #ddd<\/span>;\n    border-width<\/span>: 1px<\/span> 0<\/span> 1px<\/span> 1px<\/span>;\n    margin-top<\/span>: -1px<\/span>;\n    margin-right<\/span>: -2px<\/span>;\n    margin-left<\/span>:10px<\/span>;\n    padding<\/span>:0<\/span> 0<\/span> 0<\/span> 20px<\/span>;\n}\n#menuLeft<\/span> li<\/span>:hover<\/span>, #horario<\/span> li<\/span>:hover<\/span> {\n    background<\/span>: #eee<\/span>;\n}\n#infoContent<\/span>{\n    float<\/span>: left;\n    width<\/span>: 677px<\/span>;\n    padding<\/span>: 0<\/span>;\n    position<\/span>:relative;\n}\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Now, in order to make the tabs work, we will add this jQuery code:<\/p>\n\n\n
\/\/ When clicking on the left tab menu...<\/span>\n$('.floatCategory'<\/span>).click(function<\/span>(<\/span>) <\/span>{\n\n    \/\/ Chaning the active tab...<\/span>\n    $(this<\/span>).parent().addClass(\"active\"<\/span>).siblings().removeClass('active'<\/span>);\n\n    \/\/We have to know in which tab the user has clicked<\/span>\n    \/\/so we take the attribute 'data-content' as an identifier of the tab<\/span>\n    var<\/span> content = $(this<\/span>).attr('data-content'<\/span>);\n\n    \/* Here you could do whatever you want, getting\n    info from JSON, using the .load function... having fun!!*\/<\/span>\n    $(\"#infoContent\"<\/span>).html(content);\n});\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
We need to add it inside the $('.floatMenu').click<\/code> event as we stopPropagation<\/code> over `#main selector…<\/p>\n\n\n\n
Here you have the final code:<\/p>\n\n\n
<script<\/span> type<\/span>=\"text\/javascript\"<\/span> src<\/span>=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.7.2\/jquery.min.js\"<\/span>><\/span><\/script<\/span>><\/span>\n<script<\/span> type<\/span>=\"text\/javascript\"<\/span> src<\/span>=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jqueryui\/1.8.18\/jquery-ui.min.js\"<\/span>><\/span><\/script<\/span>><\/span>\n\n<script<\/span> type<\/span>=\"text\/javascript\"<\/span>><\/span>\n    $(document<\/span>).ready(function<\/span>(<\/span>)<\/span>{\n\n        \/*\n        We use this to hide the floating window in case they click outside it.\n        As html will be 'everything', we will use then an stopPropagation event.\n        *\/<\/span>\n        $('html, .close'<\/span>).click(function<\/span>(<\/span>)<\/span>{\n            $('.selection'<\/span>).hide();\n            $('#darkOverlay'<\/span>).hide();\n            $(\"body\"<\/span>).css(\"overflow\"<\/span>, \"visible\"<\/span>);\n\n        });\n\n        \/*\n        Here we use the stopPropagation event in order to prevent hidding the\n        floating window when we click anywhere inside the #mainFloat element.\n        *\/<\/span>\n        $(\"#mainFloat\"<\/span>).click(function<\/span>(event<\/span>)<\/span>{\n            event.stopPropagation();\n        });\n\n        \/*\n        Adding the option to hide the windows by pressing the 'escape' (ESC)\n        key with the keyboard.\n        *\/<\/span>\n        $(document<\/span>).keyup(function<\/span>(e<\/span>) <\/span>{\n            if<\/span> (e.keyCode == 27<\/span>) {\n                $('#darkOverlay'<\/span>).hide();\n                $(\"body\"<\/span>).css(\"overflow\"<\/span>, \"auto\"<\/span>);\n            }\n        });\n\n        \/*\n        Clicking over the .floatMenu selector, we will show the floating window.\n        *\/<\/span>\n        $('.floatMenu'<\/span>).click(function<\/span>(event<\/span>)<\/span>{\n            \/\/ Showing the floating window<\/span>\n            $('#darkOverlay'<\/span>).show();\n\n            \/\/ Hidding the background page scroll<\/span>\n            $(\"body\"<\/span>).css(\"overflow\"<\/span>, \"hidden\"<\/span>);\n\n            \/*default content for the first tab. (you could use\n            JSON, .load, append... whatever you want *\/<\/span>\n            $(\"#infoContent\"<\/span>).html('Hello world'<\/span>);\n\n            \/\/ When clicking on the left tab menu...<\/span>\n            $('.floatCategory'<\/span>).click(function<\/span>(<\/span>) <\/span>{\n\n                \/\/ Chaning the active tab...<\/span>\n                $(this<\/span>).parent().addClass(\"active\"<\/span>).siblings().removeClass('active'<\/span>);\n\n                \/\/We have to know in which tab the user has clicked<\/span>\n                \/\/so we take the attribute 'data-content' as an identifier of the tab<\/span>\n                var<\/span> content = $(this<\/span>).attr('data-content'<\/span>);\n\n                \/* Here you could do whatever you want, getting\n                info from JSON, using the .load function... having fun!!*\/<\/span>\n                $(\"#infoContent\"<\/span>).html(content);\n            });\n\n            \/* In order to prevent hidding the floating window, as we are on the 'html' element.\n            We have to stop the click event propagation so it won't reach 'html' *\/<\/span>\n            event.stopPropagation();\n        });\n\n    });\n<\/span><\/script<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n
CSS<\/h2>\n\n
\n\/*\nThis defines the workspace where i place the demo.\n*\/<\/span>\n#container<\/span> {\n    text-align<\/span>: left;\n    background<\/span>: #FFF<\/span>;\n    width<\/span>: 865px<\/span>;\n    margin<\/span>: 20px<\/span> auto;\n    padding<\/span>: 20px<\/span>;\n    border-left<\/span>: 1px<\/span> solid #CCC<\/span>;\n    border-right<\/span>: 1px<\/span> solid #CCC<\/span>;\n    -moz-box-shadow<\/span>: 0px<\/span> 0px<\/span> 10px<\/span> #BBB<\/span>;\n    -webkit-box-shadow<\/span>: 0px<\/span> 0px<\/span> 10px<\/span> #BBB<\/span>;\n    box-shadow<\/span>: 0px<\/span> 0px<\/span> 10px<\/span> #BBB<\/span>;\n}\n\n\n\n\n\/*\nIt defines the layer which will cover the site once the\nfloating window is showed.\n*\/<\/span>\n#darkOverlay<\/span>{\n    background<\/span>: none repeat scroll 0<\/span> 0<\/span> rgba<\/span>(255<\/span>, 255<\/span>, 255<\/span>, 0.8<\/span>);\n    cursor<\/span>: auto;\n    display<\/span>: none; \/*hidding if there's no call *\/<\/span>\n    height<\/span>: 100%<\/span>;\n    left<\/span>: 0<\/span>;\n    overflow-y<\/span>: auto;\n    position<\/span>: fixed;\n    top<\/span>: 0<\/span>;\n    width<\/span>: 100%<\/span>;\n    z-index<\/span>: 100<\/span>; \/*over everything *\/<\/span>\n}\n\n\n\n\n\/*\nWe want the content to be center...\n*\/<\/span>\n#floatWrap<\/span>{\n    margin<\/span>: 0<\/span> auto;\n    position<\/span>: static;\n    width<\/span>: 878px<\/span>;\n    z-index<\/span>: 102<\/span>;\n}\n\n\n\n\n\/*\nDefining the window wrap...\n*\/<\/span>\n#floatContent<\/span>{\n    float<\/span>: left;\n    background<\/span>: white;\n    box-shadow<\/span>: 0<\/span> 3px<\/span> 8px<\/span> rgba<\/span>(34<\/span>, 25<\/span>, 25<\/span>, 0.4<\/span>);\n    z-index<\/span>: 101<\/span>; \/*over the overlay*\/<\/span>\n    margin<\/span>:80px<\/span> 0<\/span> 80px<\/span> 0<\/span>;\n    position<\/span>:relative;\n}\n\/*\nDefining the window...\n*\/<\/span>\n#mainFloat<\/span>{\n    float<\/span>: left;\n    margin<\/span>: 0<\/span>;\n    width<\/span>: 900px<\/span>;\n    min-height<\/span>: 500px<\/span>;\n    position<\/span>: relative;\n    \/*witht his background we divide visually\n    the space*\/<\/span>\n    background<\/span>: url<\/span>('imgs\/bgFloat.gif'<\/span>) repeat-y #fff<\/span>;\n}\n\n\n\n\n\/*\nAdding the X for closing the window\n*\/<\/span>\n.close<\/span>{\n    position<\/span>: absolute;\n    top<\/span>: -15px<\/span>;\n    right<\/span>: -15px<\/span>;\n    width<\/span>: 30px<\/span>;\n    height<\/span>: 30px<\/span>;\n    background<\/span>: transparent url<\/span>('imgs\/fancybox.png'<\/span>) -40px<\/span> 0px<\/span>;\n    cursor<\/span>: pointer;\n    z-index<\/span>: 1103<\/span>;\n    display<\/span>: inline;\n}\n\n\n\n\n\/* Left tabs menu*\/<\/span>\n#menuLeft<\/span>{\n    float<\/span>:left;\n    width<\/span>:223px<\/span>;\n    margin<\/span>:90px<\/span> 0<\/span> 0<\/span> 0<\/span>;\n}\n#menuLeft<\/span> ul<\/span>{\n    margin<\/span>: -10px<\/span> 0<\/span> 0<\/span> 0<\/span>;\n    float<\/span>: left;\n    list-style<\/span>: none outside none;\n    padding<\/span>: 0<\/span>;\n    width<\/span>: 100%<\/span>;\n}\n#menuLeft<\/span> li<\/span>{\n    border-bottom<\/span>: 1px<\/span> solid #DDD<\/span>;\n    float<\/span>: left;\n    padding<\/span>: 0<\/span> 0<\/span> 0<\/span> 12px<\/span>;\n    width<\/span>: 190px<\/span>;\n    margin<\/span>: 0<\/span> 10px<\/span> 0<\/span> 10px<\/span>;\n}\n#menuLeft<\/span> ul<\/span> li<\/span> a<\/span>{\n    color<\/span>: #333<\/span>;\n    display<\/span>: block;\n    padding<\/span>: 18px<\/span> 0<\/span>;\n    text-decoration<\/span>: none;\n    width<\/span>: 204px<\/span>;\n    font-size<\/span>:1.2em<\/span>;\n}\n#menuLeft<\/span> a<\/span>:hover<\/span>{\n    text-decoration<\/span>:none;\n}\n#menuLeft<\/span> .active<\/span>,\n#menuLeft<\/span> .active<\/span>:hover<\/span> {\n    background<\/span>: #fff<\/span>;\n    width<\/span>: 194px<\/span>;\n    border<\/span>: 1px<\/span> solid #ddd<\/span>;\n    border-width<\/span>: 1px<\/span> 0<\/span> 1px<\/span> 1px<\/span>;\n    margin-top<\/span>: -1px<\/span>;\n    margin-right<\/span>: -2px<\/span>;\n    margin-left<\/span>:10px<\/span>;\n    padding<\/span>:0<\/span> 0<\/span> 0<\/span> 20px<\/span>;\n}\n#menuLeft<\/span> li<\/span>:hover<\/span>, #horario<\/span> li<\/span>:hover<\/span> {\n    background<\/span>: #eee<\/span>;\n}\n#infoContent<\/span>{\n    float<\/span>: left;\n    width<\/span>: 677px<\/span>;\n    padding<\/span>: 0<\/span>;\n    position<\/span>:relative;\n}\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n
<div<\/span> id<\/span>=\"container\"<\/span>><\/span>\n\n    <div<\/span> id<\/span>=\"darkOverlay\"<\/span>><\/span>\n        <div<\/span> id<\/span>=\"floatWrap\"<\/span>><\/span>\n            <div<\/span> id<\/span>=\"floatContent\"<\/span>><\/span>\n                <a<\/span> class<\/span>=\"close\"<\/span>><\/span><\/a<\/span>><\/span>\n                <div<\/span> id<\/span>=\"mainFloat\"<\/span>><\/span>\n                    <div<\/span> id<\/span>=\"menuLeft\"<\/span>><\/span>\n                        <ul<\/span>><\/span>\n                            <li<\/span> class<\/span>=\"active\"<\/span>><\/span><a<\/span> class<\/span>=\"floatCategory\"<\/span> href<\/span>=\"#\"<\/span> data-content<\/span>=\"Hello world\"<\/span>><\/span>Option 1<\/a<\/span>><\/span><\/li<\/span>><\/span>\n                            <li<\/span> class<\/span>=\"\"<\/span>><\/span><a<\/span> class<\/span>=\"floatCategory\"<\/span> href<\/span>=\"#\"<\/span> data-content<\/span>=\"Bye bye\"<\/span>><\/span>Option 2<\/a<\/span>><\/span><\/li<\/span>><\/span>\n                            <li<\/span> class<\/span>=\"\"<\/span>><\/span><a<\/span> class<\/span>=\"floatCategory\"<\/span> href<\/span>=\"#\"<\/span> data-content<\/span>=\"Car\"<\/span>><\/span>Option 3<\/a<\/span>><\/span><\/li<\/span>><\/span>\n                            <li<\/span>><\/span><a<\/span> class<\/span>=\"floatCategory\"<\/span> href<\/span>=\"#\"<\/span> data-content<\/span>=\"Steve Jobs\"<\/span>><\/span>Option 4<\/a<\/span>><\/span><\/li<\/span>><\/span>\n                        <\/ul<\/span>><\/span>\n                    <\/div<\/span>><\/span>\n\n                    <div<\/span> id<\/span>=\"infoContent\"<\/span>><\/span>\n\n                    <\/div<\/span>><\/span>\n                <\/div<\/span>><\/span>\n            <\/div<\/span>><\/span>\n        <\/div<\/span>><\/span>\n    <\/div<\/span>><\/span>\n\n\n    <div<\/span> class<\/span>=\"floatMenu\"<\/span>><\/span><a<\/span> href<\/span>=\"#\"<\/span>><\/span>Click here to show the floating menu<\/a<\/span>><\/span><\/div<\/span>><\/span>\n<\/div<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
You can have a look at the code working or even download it on the live demo:<\/p>\n","protected":false},"excerpt":{"rendered":"
In one of the last websites I had to program and design as a freelance, the client wanted a way to show the information without changing the page structure in order to make it simple for the visitor to go back to the main page.<\/p>\n","protected":false},"author":1,"featured_media":4947,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[105],"tags":[9,18,17,67],"class_list":["post-4948","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-developing","tag-css","tag-jquery","tag-web","tag-web-design"],"acf":[],"_links":{"self":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/4948","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/comments?post=4948"}],"version-history":[{"count":7,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/4948\/revisions"}],"predecessor-version":[{"id":11795,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/4948\/revisions\/11795"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/media\/4947"}],"wp:attachment":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/media?parent=4948"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/categories?post=4948"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/tags?post=4948"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}