Simple Flat UI Menu Modal Dialog - Memanfaatkan dialog modal untuk membungkus tombol button maupun widget akan semakin menambah keindahan dan kreasi pada sebuah blog/website. Dan tentunya masih menggunakan konsep Ui design sesuai perkembangannya saat ini, seperti simple flat ui navigasi menu dan menu metro ui efek modal dialog serta random post efek modal jquery ui yang sudah saya posting sebelumnya. DEMO DEMO CODE KONSEP DASAR : CSS /* Vn Navigasi -------------------------*/ .vn-nav{ background:#1abc9c; border-radius:6px; width:auto; padding-top:15px; padding-bottom:15px; font-size:14px; padding-left:20px; border-bottom: #16a085 3px solid; margin-bottom:10px; } .vn-nav ul { margin: 0; padding: 0; list-style-type: none; list-style-image: none; } .vn-nav li { margin-right: 0px; display: inline; } .vn-nav ul li a { text-decoration:none; margin: 0px; padding: 15px 20px 15px 20px; color:#ffffff; } .vn-nav li.current-menu-item a{ color: #fff; text-decoration:none; background-color:#16a085; } .vn-nav li.current_page_item { color: #fff; text-decoration:none; background-color:#16a085; } /* Vn Simple Modal -------------------------*/ .modalDialog { position: fixed; font-family: Arial, Helvetica, sans-serif; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.8); z-index: 99999; opacity:0; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; pointer-events: none; } .modalDialog:target { opacity:1; pointer-events: auto; } .modalDialog > div { width: 400px;height:auto; position: relative; margin: 5% auto; padding: 5px 20px 13px 20px; background: #34495e;color:#fff; } .close { background: #2c3e50; color: #16a085;padding:5px;border-radius:0 0 12px 0; line-height: 16px; position: absolute; right: -55px; text-align: center; top: 0; width: 16px; text-decoration: none; font-weight: bold; } .close:hover { background: #2c3e50;color:#e74c3c } /* Vn Button -------------------------*/ .vn-green a{ background-color:#27ae60; display:inline-block; position:relative; margin:30px 5px; padding:20px 20px 20px 80px; color:#fff; transition:all 0.4s ease } .vn-green a:hover{ background:#2c3e50 } HTML <div class="vn-nav"> <ul> <li><a href="#openModal">Button</a> <div id="openModal" class="modalDialog"> <div> <a href="#close" title="Close" class="close">X</a> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. </p> <div class="vn-green" style="text-align: center;"> <a href="#">KLIK</a> </div> </div> </div></li> </ul> </div> Untuk kode selengkapnya silakan kik link demo codenya Source Virlyz82, Jun 22, 2014 #1 exabytes-id Member Joined: Oct 3, 2013 Messages: 866 Likes Received: 35 Trophy Points: 28 Bagus gan. Tapi untuk kemudahan user sebaiknya ketika klik menu tidak perlu keluar modal. sebaiknya langsung tertuju ke link yang di klik exabytes-id, Jun 23, 2014 #2 indra.w.m Guest Sepakat dengan @exabytes-id indra.w.m, Jun 24, 2014 #3 (You must log in or sign up to reply here.) Show Ignored Content Loading... Similar Threads - Simple Flat Menu Simple Flat UI Subscribe Email Virlyz82, Jun 12, 2014, in forum: HTML & Website Design Replies: 2 Views: 1,211 Abid Rakhmansyah Jun 13, 2014 Simple Menu Efek Flip CSS3 Virlyz82, Jun 6, 2014, in forum: HTML & Website Design Replies: 1 Views: 1,034 reyichii-v3 Jul 6, 2014 Simple Tooltip Menu Dropdown CSS3 Virlyz82, May 27, 2014, in forum: HTML & Website Design Replies: 6 Views: 1,770 ancu Sep 24, 2016 Flat UI Menu Animasi Drop Down CSS3 Virlyz82, Aug 24, 2014, in forum: HTML & Website Design Replies: 3 Views: 1,299 asli3rut Sep 18, 2014 Membuat Menu Navigasi Full Color yang Flat UI dan Responsive fanjiwildanu, Aug 11, 2014, in forum: HTML & Website Design Replies: 16 Views: 4,554 KangAndre Apr 27, 2015 Share This Page Tweet Log in with Facebook Log in with Twitter Your name or email address: Do you already have an account? No, create an account now. Yes, my password is: Forgot your password? Stay logged in
Bagus gan. Tapi untuk kemudahan user sebaiknya ketika klik menu tidak perlu keluar modal. sebaiknya langsung tertuju ke link yang di klik