{"id":596,"date":"2018-08-20T23:53:31","date_gmt":"2018-08-20T23:53:31","guid":{"rendered":"https:\/\/psd2htmlconverter.com\/en\/blog\/?p=596"},"modified":"2019-01-01T23:26:39","modified_gmt":"2019-01-01T23:26:39","slug":"create-navigation-menu-from-the-text-layer","status":"publish","type":"post","link":"https:\/\/blog.psd2htmlconverter.com\/en\/2018\/08\/20\/create-navigation-menu-from-the-text-layer\/","title":{"rendered":"Create navigation menu from the text layer"},"content":{"rendered":"\n<p>Following pattern is used quite often in design templates: designer uses a text layer to visualize a navigation menu. Menu items in such a text layer are separated by the same number of space or tab characters.<\/p>\n\n\n\n<!--more-->\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"73\" src=\"https:\/\/psd2htmlconverter.com\/blog\/en\/wp-content\/uploads\/2019\/01\/6841-1024x73.png\" alt=\"\" class=\"wp-image-599\" srcset=\"https:\/\/blog.psd2htmlconverter.com\/en\/wp-content\/uploads\/2019\/01\/6841-1024x73.png 1024w, https:\/\/blog.psd2htmlconverter.com\/en\/wp-content\/uploads\/2019\/01\/6841-300x21.png 300w, https:\/\/blog.psd2htmlconverter.com\/en\/wp-content\/uploads\/2019\/01\/6841-768x55.png 768w, https:\/\/blog.psd2htmlconverter.com\/en\/wp-content\/uploads\/2019\/01\/6841.png 1603w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>We introduced an algorithm which recognizes horizontal navigation  pattern and generates HTML using unordered lists. In case you use a PSD to Bootstrap conversion option, the service will generate responsive navigation menu.<\/p>\n\n\n\n<p>The following example shows how the algorithm recognizes the horizontal menu and creates a responsive layout using Bootstrap.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><a href=\"https:\/\/psd2htmlconverter.com\/files\/bootstrap\/demo\/miami_home\/miami_home.psd\">miami_home.psd1<\/a><br>\n<a href=\"https:\/\/psd2htmlconverter.com\/files\/bootstrap\/demo\/miami_home\/miami_home.zip\">miami_home code.zip<\/a><br>\n<a href=\"https:\/\/psd2htmlconverter.com\/files\/bootstrap\/demo\/miami_home\/miami_home\/index.html\">miami_home online demo<\/a><\/p><\/blockquote>\n\n\n\n<p>We also plan to implement recognition of vertical navigation menus.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Following pattern is used quite often in design templates: designer uses a text layer to visualize a navigation menu. Menu items in such a text layer are separated by the same number of space or tab characters.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-596","post","type-post","status-publish","format-standard","hentry","category-all"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/blog.psd2htmlconverter.com\/en\/wp-json\/wp\/v2\/posts\/596","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.psd2htmlconverter.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.psd2htmlconverter.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.psd2htmlconverter.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.psd2htmlconverter.com\/en\/wp-json\/wp\/v2\/comments?post=596"}],"version-history":[{"count":4,"href":"https:\/\/blog.psd2htmlconverter.com\/en\/wp-json\/wp\/v2\/posts\/596\/revisions"}],"predecessor-version":[{"id":601,"href":"https:\/\/blog.psd2htmlconverter.com\/en\/wp-json\/wp\/v2\/posts\/596\/revisions\/601"}],"wp:attachment":[{"href":"https:\/\/blog.psd2htmlconverter.com\/en\/wp-json\/wp\/v2\/media?parent=596"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.psd2htmlconverter.com\/en\/wp-json\/wp\/v2\/categories?post=596"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.psd2htmlconverter.com\/en\/wp-json\/wp\/v2\/tags?post=596"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}