Tuxjm el sitio de jmedina

Author: admin_tuxjm

Bootstrap mega menu on hover

Bootstrap mega menu on hover ” is the keyword for which many people search when creating a mega menu. It is simply understood that the menu is created with bootstrap and its submenu items appear on hover instead of click effect. Usually, click effect is just applied on mobile because there is no way to hover on mobile devices. Conversely, hover effect is popularly applied on desktop since it reduces user operations.

Bootstrap mega menu on hover

If you are interested in our previous article “ bootstrap mega menu full width ”, the example in this article will be similar to the previous one. You are able to create the hover effect by using css or js. Regarding CSS, you can use this syntax :hover, for instance,

<li class=”menu”><a href=”#”>Menu</a><ul class=”sub-menu”><li><a href=””>Sub menu</a></li></ul></li>

If the submenu is hidden by default and appears on hover, you can use the following css: Menu:hover .sub-menu {display:block}

Besides using css, you can also use js by detecting mouse hover events. Here we have two more methods to deal with the submenu appearance. The first way is when hovering on a menu item, a class will be added and when hovering over the menu item, this class will be removed. In addition, CSS is in use as well to show and hide submenus.

$(“menu”).hover(function(){
$(this).addClass(“active”);
}, function(){
$(this).removeClass(“active”);
});

.menu .sub-menu {display:none}

.menu.active  .sub-menu {display:block}

The second technique is when hovering on a menu item, some attributes of js such as .show() will be applied.

For example,

$(“menu”).hover(function(){
$(“ sub-menu”).show();
}, function(){
$(“ sub-menu”).hide();
});

Now, we will come back to our primary task related to creating a “ bootstrap mega menu on hover ”. An integral tool in this article, as well as the previous one, is a bootstrap plugin.You can download this plugin here. We will not spend more time on integrating this plugin because there are various articles as well as detailed guidance on this taskon its homepage. In this article, we will introduce to you about how to use attributes ofcss and js so you will have options applied to different cases. You can download the file we share below. The whole code snippet is put in index.html file, please open this file and check.

đây là một đoạn code đơn giản, bạn có thể copy  cho vào dự án của bạn

This is just a simple code snippet, you can copy and paste in your project.

<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>
<style>
* {
box-sizing: border-box;
}

body {
margin: 0;
}

.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}

.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

.dropdown {
float: left;
overflow: hidden;
}

.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font: inherit;
margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
width: 100%;
left: 0;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content .header {
background: red;
padding: 16px;
color: white;
}

.dropdown:hover .dropdown-content {
display: block;
}

/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
padding: 10px;
background-color: #ccc;
height: 250px;
}

.column a {
float: none;
color: black;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
}

.column a:hover {
background-color: #ddd;
}

/* Clear floats after the columns */
.row:after {
content: “”;
display: table;
clear: both;
}

/* Responsive layout – makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
width: 100%;
height: auto;
}
}
</style>
</head>
<body>

<div class=”navbar”>
<a href=”#home”>Home</a>
<a href=”#news”>News</a>
<div class=”dropdown”>
<button class=”dropbtn”>Dropdown
<i class=”fa fa-caret-down”></i>
</button>
<div class=”dropdown-content”>
<div class=”header”>
<h2>Mega Menu</h2>
</div>
<div class=”row”>
<div class=”column”>
<h3>Category 1</h3>
<a href=”#”>Link 1</a>
<a href=”#”>Link 2</a>
<a href=”#”>Link 3</a>
</div>
<div class=”column”>
<h3>Category 2</h3>
<a href=”#”>Link 1</a>
<a href=”#”>Link 2</a>
<a href=”#”>Link 3</a>
</div>
<div class=”column”>
<h3>Category 3</h3>
<a href=”#”>Link 1</a>
<a href=”#”>Link 2</a>
<a href=”#”>Link 3</a>
</div>
</div>
</div>
</div>
</div>

<div style=”padding:16px”>
<h3>Responsive Mega Menu (Full-width dropdown in navbar)</h3>
<p>Hover over the “Dropdown” link to see the mega menu.</p>
<p>Resize the browser window to see the responsive effect.</p>
</div>

</body>
</html>

This code can be used for your projects but not your customers who have no experience in html. For these clients, you should create a plugin that allows them to configure such as editing images, text content, etc. If you are using Prestashop source code, I suggest that you should use PrestaShop Mega Menu module. When using this module, you can create different menu types such as dropdown, html, image, or products. There is no problem if you are not skillful in code. The only thing you need to do is combining your creativity and the plugin’s configurations to build up your own menu. If you encounter any problem when using the module, the support team is always willing to help you using the plugin in the most satisfying way.

 

 

 

Bootstrap mega menu full width in your website

Bootstrap mega menu full width has been a popular keyword searched by a huge number of users since it fully meets their demand. On the one hand, a mega menu plays an important role in helping customers find out their expected products with ease. On the other hand, bootstrap is a well-known framework of TW which is accountable for making websites responsive.

Building a “ bootstrap mega menu full width ” is not a difficult task. To begin with, you should define which components will be included in your mega menu. It will be just a monotonic menu with dropdowns or an attractive one with stunning images making your website livelier. The menu content can also be trending or featured products, through which primary products are easy to be found. As a result, your sales and revenues go up dramatically. After having a detailed plan, you can start building up your ideal menu using html and css.

Bootstrap mega menu full width

One small thing that you should notice is that being experienced in html and cssis required to create a menu. If you do not have technical knowledge about this field, there is a suggested mega menu file at the end of this article for you to download.

If you are working with open source codes such as WordPress, Prestashop, Shopify, there will exist an available menu. For instance, in Prestashop system, if you use the default theme menu, bootstrap will be applied to make the menu responsive. Then you just need to drag and drop to add your menu items in the administration interface. Nevertheless, we all understand that the default functions are never enough to satisfy your wishes and creativity. That’s why you need a powerful tool, combining with just a mouse and a keyboard to complete a wonderful menu without any technical knowledge. If your thought is the same as mine, I am happy to share with you the plugin which I have tried using and really enjoy. It is Prestashop Mega Menu module. Notably, after installing this module, you are kindly supported by a support team if any issue incurs.

<code class=”html”><div class=”navbar navbar-default navbar-static-top”>
<div class=”container”>
<div class=”navbar-header”>
<button type=”button” class=”navbar-toggle” data-toggle=”collapse” data-target=”.navbar-collapse”>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
</button>
</div>
<div class=”navbar-collapse collapse”>
<ul class=”nav navbar-nav”>
<li><a href=”#”>Home</a></li>
<li class=”dropdown menu-large””>
<a href=”#” class=”dropdown-toggle” data-toggle=”dropdown”> Product Listing <b class=”caret”></b> </a>
<ul class=”dropdown-menu megamenu row”>
<li>
<div class=”col-sm-6 col-md-3″>
<a href=”#” class=”thumbnail”>
<img src=”http://placehold.it/150×120″ />
</a>
</div>
<div class=”col-sm-6 col-md-3″>
<a href=”#” class=”thumbnail”>
<img src=”http://placehold.it/150×120″ />
</a>
</div>
<div class=”col-sm-6 col-md-3″>
<a href=”#” class=”thumbnail”>
<img src=”http://placehold.it/150×120″ />
</a>
</div>
<div class=”col-sm-6 col-md-3″>
<a href=”#” class=”thumbnail”>
<img src=”http://placehold.it/150×120″ />
</a>
</div>
</li>
</ul>
</li>

<li class=”dropdown menu-large”>
<a href=”#” class=”dropdown-toggle” data-toggle=”dropdown”>Categories <b class=”caret”></b></a>
<ul class=”dropdown-menu megamenu row”>
<li class=”col-sm-3″>
<ul>
<li class=”dropdown-header”>Glyphicons</li>
<li><a href=”#”>Available glyphs</a></li>
<li class=”disabled”><a href=”#”>How to use</a></li>
<li><a href=”#”>Examples</a></li>
<li class=”divider”></li>
<li class=”dropdown-header”>Dropdowns</li>
<li><a href=”#”>Example</a></li>
<li><a href=”#”>Aligninment options</a></li>
<li><a href=”#”>Headers</a></li>
<li><a href=”#”>Disabled menu items</a></li>
</ul>
</li>
<li class=”col-sm-3″>
<ul>
<li class=”dropdown-header”>Button groups</li>
<li><a href=”#”>Basic example</a></li>
<li><a href=”#”>Button toolbar</a></li>
<li><a href=”#”>Sizing</a></li>
<li><a href=”#”>Nesting</a></li>
<li><a href=”#”>Vertical variation</a></li>
<li class=”divider”></li>
<li class=”dropdown-header”>Button dropdowns</li>
<li><a href=”#”>Single button dropdowns</a></li>
</ul>
</li>
<li class=”col-sm-3″>
<ul>
<li class=”dropdown-header”>Input groups</li>
<li><a href=”#”>Basic example</a></li>
<li><a href=”#”>Sizing</a></li>
<li><a href=”#”>Checkboxes and radio addons</a></li>
<li class=”divider”></li>
<li class=”dropdown-header”>Navs</li>
<li><a href=”#”>Tabs</a></li>
<li><a href=”#”>Pills</a></li>
<li><a href=”#”>Justified</a></li>
</ul>
</li>
<li class=”col-sm-3″>
<ul>
<li class=”dropdown-header”>Navbar</li>
<li><a href=”#”>Default navbar</a></li>
<li><a href=”#”>Buttons</a></li>
<li><a href=”#”>Text</a></li>
<li><a href=”#”>Non-nav links</a></li>
<li><a href=”#”>Component alignment</a></li>
<li><a href=”#”>Fixed to top</a></li>
<li><a href=”#”>Fixed to bottom</a></li>
<li><a href=”#”>Static top</a></li>
<li><a href=”#”>Inverted navbar</a></li>
</ul>
</li>
</ul>

</li>
</ul>
</div>
</div>
</div><

code css

.navbar-default{
color: #fff;
background-color: #232323;
border-color: #aca1a2;
}
.navbar-default .navbar-nav > li > a{
color:#fff;
}
.navbar-default .navbar-nav > .dropdown > a .caret{
border-top-color: #fff;
border-bottom-color: #fff;
}
.navbar-default .navbar-brand{
color:#fff;
}
.menu-large {
position: static !important;
}
.megamenu{
padding: 20px 0px;
width:100%;
}
.megamenu> li > ul {
padding: 0;
margin: 0;
}
.megamenu> li > ul > li {
list-style: none;
}
.megamenu> li > ul > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.428571429;
color: #333333;
white-space: normal;
}
.megamenu> li ul > li > a:hover,
.megamenu> li ul > li > a:focus {
text-decoration: none;
color: #262626;
background-color: #f5f5f5;
}
.megamenu.disabled > a,
.megamenu.disabled > a:hover,
.megamenu.disabled > a:focus {
color: #999999;
}
.megamenu.disabled > a:hover,
.megamenu.disabled > a:focus {
text-decoration: none;
background-color: transparent;
background-image: none;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
cursor: not-allowed;
}
.megamenu.dropdown-header {
color: #428bca;
font-size: 18px;
}
@media (max-width: 768px) {
.megamenu{
margin-left: 0 ;
margin-right: 0 ;
}
.megamenu> li {
margin-bottom: 30px;
}
.megamenu> li:last-child {
margin-bottom: 0;
}
.megamenu.dropdown-header {
padding: 3px 15px !important;

}
.navbar-nav .open .dropdown-menu .dropdown-header{
color:#fff;
}
}

code jquery

// Use this if wants to open menu on honver not click,
jQuery(document).ready(function(){
$(“.dropdown”).hover(
function() { $(‘.dropdown-menu’, this).stop().fadeIn(“slow”);
},
function() { $(‘.dropdown-menu’, this).stop().fadeOut(“slow”);
});
});

Come back to the task creating a mega menu using html, you need to download bootstrap to your device then unzip this file. Next, copy and paste the following code snippet to file menu.html. After that, you open and run file index.html on the browser such as Chrome or Firefox. You will receive the result like the screenshot above. If you would like to add bootstrap mega menu full width code snippet to your website, just open your project and insert the given code. Remember to back up your project before adding new code snippets because the added css may have effects on your website interface. Please share this article if it is helpful. If you have any suggestion or better tactics, please leave a comment so we can improve this article and the next ones in the future. Thanks for reading!

Xen.org 4.1 Liberado

Así es, ya esta aquí la versión estable de Xen 4.1, despuśe de 11 meses de desarrollo y gracias a las contribuciones de voluntarios y empresas que contribuyen al desarrollo de Xen.org, Aquí les dejo el anuncio oficial (en inglés), ya es hora de probar esta versión y esperemos que se corrijan muchos de los problemas que había en Xen 4.0.

After 11 months of development and 1906 commits later (6 a day !!!), Xen.org is proud to present its new stable Xen 4.1 release. We also wanted to take this opportunity to thank the 102 individuals and 25 organisations who have contributed to the Xen codebase and the 60 individuals who made just over 400 commits to the Xen subsystem and drivers in the Linux kernel.

New Xen Features

Xen 4.1 sports the following new features:

  • A re-architected XL toolstack that is functionally nearly equivalent to XM/XEND
  • Prototype credit2 scheduler designed for latency-sensitive workloads and very large systems
  • CPU Pools for advanced partitioning
  • Support for large systems (>255 processors and 1GB/2MB super page support)
  • Support for x86 Advanced Vector eXtension (AVX)
  • New Memory Access API enabling integration of 3rd party security solutions into Xen virtualized environments
  • Even better stability through our new automated regression tests

Further information can be found in the release notes.

XL Toolstack: Xen 4.1 includes a re-architected toolstack, that is based on the new libxenlightlibrary, providing a simple and robust API for toolstacks. XL is functionally equivalent and almost entirely backwards compatible with existing XM domain configuration files. The XEND toolstack remains supported in Xen 4.1 however we strongly recommend that users upgrade to XL. For more information see the Migration Guide. Projects are underway to port XCP’s xapi and libvirt to the new libxenlight library.

Credit2 Scheduler: The credit1 scheduler has served Xen well for many years.  But it has several weaknesses, including working poorly for latency-sensitive workloads, such as network traffic and audio. The credit2 scheduler is a complete rewrite, designed with latency-sensitive workloads and very large numbers of CPUs in mind. We are still calling it a prototype scheduler as the algorithm needs more work before it will be ready to become the main scheduler. However it is stable and will perform better for some workloads than credit1.

CPU pools: The default credit scheduler provides limited mechanisms (pinning VMs to CPUs and using weights) to partition a machine and allocate CPUs to VMs. CPU pools provide a more powerful and easy to use way to partition a machine: the physical CPUs of a machine are divided into pools.  Each CPU pool runs its own scheduler and each running VM is assigned to one pool.   This not only allows a more robust and user friendly way to partition a machine, but it allows using different schedulers for different pools, depending on which scheduler works best for that workload.

Large Systems: Xen 4.1 has been extended and optimized to take advantage of new hardware features, increasing performance and scalability in particular for large systems. Xen now supports the Intel x2APIC architecture and is able to support systems with more than 255 CPUs. Further, support for EPT/VTd 1GB/2MB super pages has been added to Xen, reducing the TLB overhead. EPT/VTd page table sharing simplifies the support for Intel’s IOMMU by allowing the CPU’s Enhanced Page Table to be directly utilized by the VTd IOMMU. Timer drift has been eliminated through TSC-deadline timer support that provides a per-processor timer tick.

Advanced Vector eXtension (AVX): Support for xsave and xrestor floating point instructions has been added, enabling Xen guests to utilize AVX instructions available on newer Intel processors.

Memory Access API: The mem_access API has been added to enable suitably privileged domains to intercept and handle memory faults. This extents Xen’s security features in a new direction and enables third parties to invoke malware detection software or other security solutions on demand from outside the virtual machine.

Upstreaming

During the development cycle of Xen 4.1, the Xen community worked closely with upstream Linux distributions to ensure that Xen dom0 support and Xen guest support is available from unmodified Linux distributions. This means that using and installing Xen has become much easier than it was in the past.

  • Basic dom0 support was added to the Linux kernel and a vanilla 2.6.38 kernel is now able to boot on Xen as initial domain. There is still some work to do as the initial domain is not yet able to start any VMs, but this and other improvements have already been submitted to the kernel community or will be soon.
  • Xen developers rewrote the Xen PV-on-HVM Linux drivers in 2010 and submitted them for inclusion in upstream Linux kernel. Xen PV-on-HVM drivers were merged to upstream kernel.org Linux 2.6.36, and various optimizations were added in Linux 2.6.37. This means that any Linux 2.6.36 or 2.6.37 kernel binary can now boot natively, on Xen as dom0, on Xen asPV guest and on Xen as PV on HVM guest. For a full list of supported Linux distributions seehere.
  • Xen support for upstream Qemu was developed, such that upstream Qemu can be used as Xen device model. Our work has received a good feedback from the Qemu Community, but is not yet in the mainline.

The Xen development community recognizes that there is still some way to go, thus we will continue to work with upstream open source projects to ensure that Xen works out-of-the-box with all major operating systems, allowing users to get the benefits of Xen such as multi-OS support, performance, reliability, security and feature richness without incurring the burden of having to use custom builds of operating systems.

More Info

Downloads, release notes, data sheet and other information are available from the download page. Links to useful wiki pages and other resources can be found on the Xen support page.

Como instalar un certificado raíz SSL en el navegador Chromium

A diferencía de Mozilla Firefox, el navegador Chromium usa la biblioteca Mozilla NSS para el soporte SSL/TLS, para instalar el certificado raíz vamos a requierir el programa certutil parte del paquete libnss3-tools.

Instalamos el paquete libnss3-tools:

$ sudo aptitude install libnss3-tools

Ahora descargamos el certificado raíz:

$ wget http://mail.e-compugraf.com/Compugraf_Root_CA.crt

Instalamos el certificado raíz en el llavero local:

$ certutil -d sql:$HOME/.pki/nssdb -A -t TC -n “compugraf.com” -i ~/Compugraf_RootCAa.crt

Listo, ahora si abra chromium y vaya al sitio seguro para el cual quiere validar la autenticidad mediante el certificado raíz y vea que ya no aparece la tache roja :).

Configuración de Firewall Shorewall de dos interfaces con NAT en Ubuntu Server

Buen día aquí les dejo un nuevo documento que se describe la instalación y configuración de un sistema Firewall para filtrado de paquetes y control de conexiones sobre el sistema operativo Ubuntu Server LTS 8.04.4.

Durante el transcurso del documento realizaremos diferentes tareas de configuración en un Firewall con funciones de enrutado en un sistema con Ubuntu Server LTS 8.04.4, el cual cuenta con dos interfaces de red, una conectada directamente a un router o modem del provedor de Internet y otra conectada al switch de la red local a la que esta conectados varios servidores y PCs de usuario así como impresoras en red. Las tareas más comunes de configuración, administración y monitorización de un Firewall serán descritas en este documento, en la siguiente lista podemos ver las tareas a realizar:

  • Configurar los parametros de red para sistema GNU/Linux dos interfaces de red (Multi-homed)
  • Instalación de los pre requisitos del sistema GNU/Linux para operar como Router y Firewall
  • Instalación y configuración básica del Firewall Shorewall en un sistema con dos interfaces de red
  • Configuración de Ennmascaramiento de IP (MASQUERADING/SNAT) para dar salida a Internet a los usuarios de la LAN de forma segura y controlada
  • Crear reglas de Firewall para Proxy HTTP Transparente
  • Crear reglas de NAT Port Forwarding (DNAT) para redireccionar tráfico desde el Internet a sistemas en la red local
  • Crear reglas NAT One-to-One
  • Configuración de sistema de Logs para el registro de eventos del Firewall Shorewall
  • Monitorizando las conexiones al firewall y ancho de banda
  • Usando los comandos de operación del firewall Shorewall

Para ver el documento en línea vaya a: Configuración de Firewall Shorewall de dos interfaces con NAT en Ubuntu Server.

Si tienen dudas o comentarios acerca del documento no duden en consultarme.

Copyright © 2019 Tuxjm el sitio de jmedina

Theme by Anders NorenUp ↑